Pourquoi CSS « ​​animation-delay » affecte-t-il parfois uniquement la première itération d'animation ?

Comprendre les délais d'animation en CSS

La propriété animation-delay est un attribut CSS important qui contrôle le délai avant le démarrage d'une animation. Cependant, dans certains scénarios, cela peut s'appliquer uniquement à l'itération initiale d'une animation, sans affecter les itérations suivantes.

Par exemple, considérons le code suivant :

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

Dans cet exemple, le délai d'animation de 4 secondes n'est appliqué qu'à la première boucle de l'animation. Par la suite, l'animation brillante continue indéfiniment, sans aucun délai.

Approche alternative

Une alternative à l'utilisation du délai d'animation consiste à introduire une étape intermédiaire dans les images clés de l'animation. Par exemple :

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

Cette technique prolonge efficacement la durée de l'animation pour s'adapter au délai souhaité (dans ce cas, 80 % de la durée totale). Cependant, cette approche peut modifier l'apparence de l'animation.

Compatibilité entre navigateurs

Il est important de noter que le comportement de l'animation-delay peut varier selon les différents navigateurs. . Certains navigateurs peuvent appliquer le délai de manière cohérente à toutes les itérations, tandis que d'autres peuvent réinitialiser le délai à chaque boucle suivante. Par conséquent, il est souvent nécessaire d'utiliser des solutions de contournement spécifiques au navigateur.

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!