Тип анимации

<div class="grid grid-col-1 sm:grid-col-2 lg:grid-col-4 gap-3">
  <div class="flex flex-col gap-1">
    <div class="p-3 radius-ui bg-primary-container color-on-primary-container text-center animation infinite">Проявление</div>
    <code class="text-1/2 color-on-surface-variant">animation</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="p-3 radius-ui bg-secondary-container color-on-secondary-container text-center animation animation-from-left infinite">Слева</div>
    <code class="text-1/2 color-on-surface-variant">animation-from-left</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="p-3 radius-ui bg-tertiary-container color-on-tertiary-container text-center animation animation-from-right infinite">Справа</div>
    <code class="text-1/2 color-on-surface-variant">animation-from-right</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="p-3 radius-ui bg-success-container color-on-success-container text-center animation animation-from-bottom infinite">Снизу</div>
    <code class="text-1/2 color-on-surface-variant">animation-from-bottom</code>
  </div>
</div>

<div class="flex flex-col gap-3 items-start">
  <button type="button" class="sf-button sf-button--outline sf-button--size-1 js-animation-replay">Повторить</button>
  <div class="grid grid-col-1 sm:grid-col-2 gap-3 w-full">
    <div class="flex flex-col gap-1">
      <div class="p-3 radius-ui bg-primary-container color-on-primary-container text-center animation animation-from-bottom js-animation-sample">Один раз</div>
      <code class="text-1/2 color-on-surface-variant">animation animation-from-bottom</code>
    </div>
    <div class="flex flex-col gap-1">
      <div class="p-3 radius-ui bg-secondary-container color-on-secondary-container text-center animation animation-from-bottom infinite">По кругу</div>
      <code class="text-1/2 color-on-surface-variant">animation animation-from-bottom infinite</code>
    </div>
  </div>
</div>

function initAnimationReplay() {
  document.querySelectorAll('.js-animation-replay').forEach(function (button) {
    button.addEventListener('click', function () {
      button.parentElement.querySelectorAll('.js-animation-sample').forEach(function (sample) {
        sample.classList.remove('animation');
        void sample.offsetWidth;
        sample.classList.add('animation');
      });
    });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initAnimationReplay);
} else {
  initAnimationReplay();
}