Чтобы сделать анимацию бесконечной в CSS, нужно использовать свойство animation-iteration-count и установить его значение равным infinite (бесконечность).
HTML:
<div class="box"></div>
CSS:
.box {
width: 50px;
height: 50px;
background-color: red;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite; /* устанавливаем бесконечное количество повторений */
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
В этом примере мы создали блок div с классом box и применили к нему стиль с помощью CSS. Затем мы определили анимацию с помощью @keyframes и назвали ее move.
Анимация move перемещает блок по горизонтальной оси с помощью свойства transform и значения translateX — от начальной точки (0) до точки с координатой 200 пикселей.
Чтобы сделать анимацию бесконечной, мы установили свойство animation-iteration-count равным infinite. Теперь, когда анимация достигнет конечной точки, она будет начинаться заново и повторяться бесконечное количество раз.
Таким образом, блок будет бесконечно перемещаться по горизонтальной оси вправо на расстояние 200 пикселей и переходить обратно в начальную точку.
