Как зациклить анимацию css
Ответы
Ivan Gagarinov
16 июля 2024
Для зацикливания анимации в 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.
0
0