Une nouvelle façon de retarder les animations des images clés

La création de pauses entre les itérations dans les animations CSS @keyframes n'est pas directement prise en charge. Alors que animation-delay rejette le début de l'animation, l'insertion de retards entre les itérations nécessite des solutions de contournement. Cet article explore des techniques efficaces, abordant les limites des méthodes antérieures.

Le besoin a surgi tout en adaptant une animation de stars de tir pour un portail des employés sur le thème de l'espace. Moins d'étoiles étaient nécessaires pour minimiser la distraction et la charge du processeur, tout en maintenant un sentiment d'aléatoire.

Limites des méthodes existantes

Les méthodes traditionnelles impliquent d'ajuster les images clés à une fraction de 100%, en maintenant l'état final jusqu'à 100% pour simuler une pause. Ceci est lourd, sujet aux erreurs, et rend la compréhension de la logique de l'animation difficile.

 @keyframes my-animation {
  / * Animation (0% à 50%) * /
  0% {Largeur: 0; }
  15% {largeur: 100px; }
  / * Pause (50% à 100%) * /
  50%, 100% {largeur: 0; }
}

Une nouvelle approche: cachette conditionnelle

Une méthode supérieure utilise un deuxième ensemble @keyframes pour contrôler la visibilité pendant la pause. Cela sépare la logique d'animation de la pause.

 .target-of-animation {
  Animation: my-awesome-beboop 1s, pause-between-iterations 4S;
}

@keyframes my-awesome-beboop {
  / * Votre principale animation ici * /
}

@keyframes pause
  / * Visible (25%) * /
  0%, 25% {Opacité: 1; }
  / * Hidden (75%) * /
  25,1%, 100% {opacité: 0; }
}

La durée de pause doit être un multiple de la durée de l'animation. Les images clés de répétition infiniment redémarreront immédiatement, dépassant les animations plus longues.

Insigne des clés: les fonctions d'assouplissement s'appliquent entre les images clés définies, pas de 0% à 100%. Cela signifie que la courbe d'assouplissement est appliquée individuellement à chaque propriété entre les images clés consécutives.

Dans l'exemple ci-dessus, my-awesome-beboop s'exécute plusieurs fois invisible pendant la pause avant de reprendre visuellement.

Voici comment cela s'applique à l'animation des étoiles de tir:

Maintenir la visibilité pendant les pauses

Si l'animation doit rester visible pendant les pauses, un deuxième ensemble @keyframes peut contrer le mouvement de l'animation primaire. Par exemple, si translateX est utilisé, animer left ou margin-left pour neutraliser le mouvement.

Les exemples incluent la pause à l'aide transform-origin ou de contre-réaction translateX avec l'animation left . La pause translateX pour plusieurs itérations nécessite des images clés plus complexes:

 / * Pause pour trois itérations * /
@KeyFrames Slide-left-Pause {
  25%, 50%, 75% {à gauche: 0; }
  37,5%, 62,5%, 87,5% {gauche: -100px; }
  100% {gauche: 0; }
}

Une gigue mineure peut se produire en raison d'animations contradictoires.

Conclusion

Cacher l'élément pendant les pauses ou la contre-réaction d'animations transform offre les meilleures performances. La manipulation des propriétés comme left , margin ou width est plus intensive en calcul que d'ajuster opacity .

Crédit à Yusuke Nakaya pour l'animation originale des étoiles de tournage.

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!