Cómo animar imágenes en CSS para siempre

En este artículo, abordaremos una pregunta común relacionada con las animaciones CSS3: hacer que se ejecuten indefinidamente.

El desafío

Suponga que tiene una serie de fotos que desea mostrar como una presentación de diapositivas, realizando una transición suave entre ellas mediante animación CSS3. Sin embargo, no está satisfecho con el comportamiento predeterminado, donde la última foto se desvanece y la página se vuelve a cargar, reiniciando efectivamente la presentación de diapositivas.

La solución

Para lograr una animación en bucle perfecta, necesitamos para modificar el CSS para especificar que la animación debe iterarse continuamente. De forma predeterminada, las animaciones CSS están configuradas para ejecutarse solo una vez.

La propiedad clave que agregaremos a nuestro CSS es animation-iteration-count. Aquí tienes un ejemplo:

@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;
}

Al establecer recuento de iteraciones de animación en infinito, la animación continuará repitiéndose indefinidamente, creando una transición perfecta entre tus fotos.