Est-ce que CSS « ​​animation-delay » affecte toutes les itérations d'une animation répétée ?

Problème de retard d'animation CSS dans les animations répétées

Contexte :

La création d'animations CSS peut être un outil puissant pour ajouter des éléments visuels effets sur les pages Web. Cependant, définir la propriété animation-delay pour retarder le début d'une animation peut entraîner un comportement inattendu lorsque l'animation est configurée pour se répéter à l'infini.

Question :

Est-ce que il est possible de garantir que la propriété animation-delay s'applique à toutes les itérations d'une animation CSS répétée, plutôt qu'à la première itération ?

Réponse :

Non, la propriété animation-delay ne peut pas être appliquée à toutes les itérations d'une animation CSS répétée. Une fois le délai initial appliqué à la première itération, les itérations suivantes démarreront immédiatement, même si un délai d'animation est spécifié.

Solution de contournement :

Une solution de contournement courante consiste à créer une nouvelle image clé à un pourcentage arbitraire (par exemple 80 %) identique à l'image clé initiale. Cela crée effectivement un retard en remplissant l'animation avec une période de temps non visible. Cependant, cette approche peut entraîner des animations plus longues si le délai est souhaité.

Une autre approche consiste à utiliser plusieurs images clés avec des durées différentes pour créer le délai souhaité. Par exemple, pour obtenir un délai de 4 secondes suivi d'une animation d'une seconde, on pourrait utiliser les images clés suivantes :

@keyframes my-animation {
  0% { ... }
  80% { ... }
  90% { ... }
  100% { ... }
}

Régler la durée de l'animation sur 5 secondes entraînerait un délai de 4 secondes. avant le début de l'animation.

Limitation :

Il convient de noter que le délai d'animation La propriété s'applique à l'ensemble de l'animation, y compris toutes les itérations. Par conséquent, si vous avez besoin de délais variables pour différents éléments utilisant la même animation, vous devrez utiliser des approches alternatives, telles que la création d'animations distinctes avec des délais différents.

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!