Comment animer des images en CSS pour toujours

Dans cet article, nous aborderons une question courante concernant les animations CSS3 : les faire fonctionner indéfiniment.

Le défi

Supposons que vous souhaitiez afficher une série de photos sous forme de diaporama, en effectuant une transition fluide entre elles à l'aide de l'animation CSS3. Cependant, vous n'êtes pas satisfait du comportement par défaut, où la dernière photo disparaît et la page se recharge, redémarrant ainsi le diaporama.

La solution

Pour obtenir une animation en boucle transparente, nous avons besoin pour modifier le CSS pour spécifier que l'animation doit itérer en continu. Par défaut, les animations CSS ne sont configurées pour s'exécuter qu'une seule fois.

La propriété clé que nous ajouterons à notre CSS est animation-iteration-count. Voici un exemple :

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

En définissant animation-iteration-count sur infini, l'animation continuera à tourner indéfiniment, créant une transition transparente entre vos photos.