Comment puis-je créer une boucle d'animations CSS3 indéfiniment ?

Boucler indéfiniment des animations CSS3

Les animations CSS3 offrent un moyen pratique d'animer des éléments sur une page Web. Cependant, par défaut, ces animations ne sont jouées qu'une seule fois. Pour que les animations tournent en boucle en continu, nous devons utiliser une propriété CSS spécifique.

Défi

Vous souhaitez qu'une série d'images apparaissent et disparaissent en continu sans avoir à le faire rechargez la page.

Solution

La clé pour permettre une boucle sans fin de CSS3 animations réside dans la propriété animation-iteration-count. Cette propriété spécifie le nombre de fois qu'une animation se répète avant de s'arrêter. En définissant cette propriété sur infini, nous pouvons demander au navigateur d'exécuter l'animation indéfiniment.

Dans le code que vous avez fourni, vous avez défini plusieurs conteneurs d'images avec des classes CSS. Pour activer la boucle continue, ajoutez la ligne suivante aux règles CSS pour chaque image :

animation-iteration-count: infinite;

Voici le CSS mis à jour avec la propriété ajoutée :

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

En définissant animation-iteration- comptez jusqu'à l'infini pour chaque image, vous vous êtes assuré que l'animation de fondu se répétera à l'infini, passant de manière transparente entre les images sans aucune interruption. Cela créera l'illusion d'une animation en boucle continue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!