React - Сбросить анимацию css, когда в список будет добавлен новый элемент для синхронизации c между анимациями

Question

У меня есть простой список с Material Ui

, а также я добавил класс к тексту в listItem

• , так что refre sh когда список загружен и событие с этим классом выглядит хорошо, и анимация синхронизируется c между другими элементами списка

, но когда в списке появляется новый элемент, это выглядит как «танец»

мой вопрос: как я могу синхронизировать анимацию только на CSS, когда есть новый элемент, без рендеринга всех элементов

Нужно ли мне искать библиотеку 3dpary вместо CSS? если да, я могу это сделать

@keyframes animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes animation {
    to {
        visibility: hidden;
    }
}
@keyframes blinker {  
  50% { opacity: 0.3; }
}

стиль компонента:

   class: {
      flex: '0 0 27%',
      '&.itemDivToAnimate': {
        color: theme.palette.error.main,
        animation: 'animation 0.7s steps(2, start) infinite',
        '-webkit-animation': 'animation 0.7s steps(2, start) infinite'
      }
    },

в компоненте функции listItem:

  <Typography noWrap={noWrap} variant="body1">
        text to animate
      </Typography>