Comment puis-je ajouter un délai cohérent entre les itérations d'animation CSS ?

Délai d'animation CSS : prolonger la pause entre les itérations

Pour obtenir une animation répétitive avec un délai constant entre les itérations, plutôt qu'un délai appliqué uniquement à la première itération, considérez les méthodes suivantes :

1. Ajuster la durée de l'animation :

Une solution de contournement consiste à incorporer le délai souhaité dans la durée de l'animation. Cela implique de calculer la durée réelle que devrait prendre l'animation (y compris le délai), puis de définir la propriété animation-duration en conséquence. Par exemple :

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

Dans cet exemple, l'animation aura une durée réelle de 5 secondes, avec un délai d'1 seconde.

2. Utilisez des animations séparées pour le retard et l'effet :

Une autre approche consiste à créer des animations distinctes pour le retard et l'effet réel. Cette méthode offre plus de flexibilité pour contrôler le retard indépendamment de l'animation elle-même. Voici comment y parvenir :

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

Dans ce cas, l'animation « délai » augmentera progressivement l'opacité de 0 à 1 sur 4 secondes, créant un effet de fondu. L'animation « briller » se déroulera ensuite indéfiniment, créant le dégradé de balayage souhaité.

3. Utiliser les préfixes du fournisseur :

Dans certains cas, vous pouvez rencontrer des problèmes de compatibilité du navigateur avec la propriété 'animation-delay'. Pour garantir la compatibilité, il est recommandé d'inclure les préfixes du fournisseur tels que « -webkit- » ou « -moz- » avec la propriété standard. Par exemple :

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

Remarque supplémentaire :

Le code fourni dans la réponse utilisant '@-webkit-keyframes' convient aux anciennes versions de WebKit. Il n'est généralement pas recommandé de s'appuyer sur les préfixes des fournisseurs dans le développement moderne, sauf si cela est nécessaire pour des raisons de compatibilité.

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!