Доверьте продвижение нам

Попробуйте надежный хостинг для вашего сайта

Мы рекомендуем своим клиентам! Получите надежность и полное управление вашим сайтом.

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как сделать анимацию бесконечной css

Views Icon61

Чтобы сделать анимацию бесконечной в 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 пикселей и переходить обратно в начальную точку.

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.