/
Вопросы и ответы
/
CSS
/

Как зациклить анимацию css

Как зациклить анимацию css

4 года назад

Человек-Молекула

Ответы

0

Для зацикливания анимации в CSS можно использовать свойство animation-iteration-count с значением infinite, которое означает бесконечное число повторов.

Пример использования:

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite; /* зацикливаем анимацию */
}

В этом примере анимация myAnimation будет выполняться бесконечное количество раз. Можно настроить другие параметры анимации, например, продолжительность (animation-duration), сглаживания времени анимации (animation-timing-function) и т.д.

Если нужно зациклить анимацию без указания значений, просто укажите infinite в качестве значения для animation-iteration-count.

2 года назад

Ivan Gagarinov

+7 800 100 22 47

бесплатно по РФ

+7 495 085 21 62

бесплатно по Москве

108813 г. Москва, вн.тер.г. поселение Московский,
г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3
ОГРН 1217300010476
ИНН 7325174845