Comment puis-je obtenir des retards cohérents dans les animations CSS répétées ?

Styliser des animations répétées avec CSS : résoudre le retard d'animation

Lors de l'utilisation d'animations CSS, il est essentiel de contrôler efficacement l'affichage des effets répétés. Un problème courant survient lorsque la propriété animation-delay n'affecte que la première itération, provoquant la répétition continue de l'animation sans aucune pause.

Pour résoudre ce problème, une méthode consiste à créer une nouvelle animation pour émuler le retard. Dans le code fourni, l'animation « expbarshine » retarde le balayage du dégradé de 80 %, simulant ainsi la pause souhaitée. Cependant, cette approche peut modifier la durée totale de l'animation.

Une solution alternative proposée par un autre utilisateur consiste à utiliser une image clé intermédiaire neutre. Dans l'extrait de code ci-dessous, l'animation "pan" obtient des résultats similaires sans modifier la durée globale :

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

En définissant une image clé neutre à 90%, la pause est effectivement appliquée à toutes les itérations sans affecter la durée de l'animation. durée. Cette approche offre un plus grand contrôle et une plus grande flexibilité, permettant des retards cohérents entre les éléments utilisant la même animation.

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!