Как анимировать изображения в CSS навсегда

В этой статье мы рассмотрим распространенный вопрос, связанный с анимацией CSS3: заставить ее выполняться бесконечно.

Задача

Предположим, у вас есть серия фотографий, которые вы хотите отобразить в виде слайд-шоу, плавно переходя между ними с помощью CSS3 анимация. Однако вас не устраивает поведение по умолчанию, когда последняя фотография исчезает и страница перезагружается, фактически перезапуская слайд-шоу.

Решение

Чтобы добиться плавного зацикливания анимации, нам нужно изменить CSS, чтобы указать, что анимация должна повторяться непрерывно. По умолчанию анимация CSS настроена на запуск только один раз.

Ключевое свойство, которое мы добавим в наш CSS, — это animation-iteration-count. Вот пример:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

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