Comment créer une animation en boucle harmonieuse avec CSS3 ?

Animations CSS3 en boucle transparente

Problème :

Vous voulez une animation ininterrompue qui passe de manière transparente de la dernière image à la tout d'abord, créer une boucle continue effet.

Solution :

1. Utilisez la propriété animation-iteration-count :

Ajoutez la propriété suivante à vos images clés :

animation-iteration-count: infinite;

Cette propriété spécifie le nombre de fois que l'animation se répétera. En le réglant sur l'infini, l'animation bouclera indéfiniment.

2. Code CSS révisé :

Voici le code CSS mis à jour :

@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-webkit-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-o-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

Explication :

En spécifiant le nombre d'itérations d'animation : infini, chaque photo apparaîtra en fondu, restera visible pendant un certain temps, puis disparaîtra uniquement pour revenir en douceur à la première photo, créant ainsi un effet sans fin. boucle.

Remarque :

Assurez-vous que votre animation est conçue de telle sorte que l'opacité passe de 1 à 0 (ou vice versa) pour que la boucle fonctionne de manière transparente.

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!