Как сделать анимацию бесконечно повторяющейся?

Question

Чтобы сделать анимацию бесконечно повторяющейся, используется свойство animation вместе с значением infinite. Это значение указывает, что анимация должна выполняться без остановки, пока элемент видим.

Например, animation: example 2s infinite; будет повторять анимацию с именем example каждые 2 секунды.

YeaHub · Accepted Answer

Анимации в CSS создаются с помощью ключевых кадров (@keyframes), которые описывают, как элемент должен изменяться в течение времени. Чтобы анимация выполнялась бесконечно, необходимо указать значение infinite в свойстве animation.Пример создания бесконечно повторяющейся анимации:@keyframes example {
	from { transform: translateY(0); }
	to { transform: translateY(-20px); }
}
.box {
	animation: example 1s infinite;
} В этом примере элемент будет плавно перемещаться вверх и возвращаться на исходное место каждую секунду. Параметры анимации можно настраивать, изменяя длительность и другие свойства, такие как ease-in, ease-out для контроля скорости анимации.