Catégories
Astuces et Design

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

Si vous avez déjà voulu ajouter un pause entre chaque itération de votre CSS @keyframes animation, vous avez probablement été frustré de constater qu'il n'y a pas de moyen intégré de le faire en CSS. Bien sûr, nous pouvons retarder la début d'un ensemble de @keyframes avec animation-delay, mais il n'y a aucun moyen d'ajouter du temps entre la première itération à travers les images clés et chaque exécution suivante.

Cela est arrivé lorsque j'ai voulu adapter cette animation d'étoiles filantes pour l'utiliser comme arrière-plan de la bannière de la page d'accueil dans un portail d'employés sur le thème de l'espace. Je voulais utiliser moins d'étoiles pour réduire la distraction par rapport au contenu principal, empêcher les CPU de fondre et garder les étoiles filantes sembler aléatoires.

Pas de pause

Par souci de comparaison.

La méthode de retard «originale»

Voici un exemple où j'ai appliqué la technique traditionnelle de retard des images clés à ma fourchette des étoiles filantes.

Cette approche consiste à déterminer la durée souhaitée du délai entre les itérations, puis à compresser les images clés à une fraction de 100%. Ensuite, nous maintenons l'état final de l'animation jusqu'à ce qu'il atteigne 100% pour réaliser la pause.

@keyframes my-animation {
  /* Animation happens between 0% and 50% */
  0% {
    width: 0;
  }
  15% {
    width: 100px;
  }
  /* Animation is paused/delayed between 50% and 100% */
  50%, 100% {
    width: 0;
  }
}

J'ai connu le principal inconvénient de cette approche: chaque image clé doit être modifiée manuellement, ce qui est légèrement douloureux et certainement sujet à des erreurs. Il est également plus difficile de comprendre ce que fait l’animation si elle nécessite une transposition mentale à 100% de toutes les images clés.

Nouvelle technique: se cacher pendant le délai

Une autre technique consiste à créer un Nouveau ensemble de @keyframes qui est responsable de masquer l'animation pendant le retard. Ensuite, appliquez cela avec l'animation d'origine, en même temps.

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

@keyframes my-awesome-beboop {
  ...
}

@keyframes pause-between-iterations {
  /* Other animation is visible for 25% of the time */
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  /* Other animation is hidden for 75% of the time */
  25.1% {
    opacity: 0;	
  }
  100% {
    opacity: 0;
  }
}

Une limitation de cette technique est que la pause entre les animations doit être un multiple entier des images clés «suspendues». En effet, les images clés qui se répètent à l'infini s'exécuteront à nouveau immédiatement, même si des images clés plus longues sont appliquées au même élément.

Côté intéressant: Lorsque j'ai commencé cet article, je pensais à tort qu'une fonction d'accélération était appliquée à 0% et se terminait à 100%. Il s'avère que la fonction d'accélération est appliquée à chaque propriété CSS, en commençant par la première image-clé où une valeur est définie et se terminant à l'image clé suivante où une valeur est définie (par exemple, une courbe d'assouplissement serait appliquée de 25% à 75%, si les images clés étaient 25% { left: 0 } 75% { left: 50px}). Rétrospectivement, cela a tout à fait du sens car il serait difficile d'ajuster votre animation s'il s'agissait d'un sous-ensemble de la courbe d'assouplissement total, mais mon esprit est légèrement soufflé.

dans le my-awesome-beboop exemple d'images clés ci-dessus, my-awesome-beboop se déroulera trois fois dans les coulisses pendant la pause-between-animations images clés avant d'être révélées pour ce qui semble être sa deuxième boucle à l'utilisateur (qui est vraiment la cinquième fois qu'il est exécuté).

Voici un exemple qui utilise ceci pour ajouter un délai entre les étoiles filantes:

Vous ne pouvez pas masquer votre animation pendant le délai?

Si vous devez conserver votre animation à l'écran pendant le délai, il existe une autre option que la dissimulation. Vous pouvez toujours utiliser un deuxième ensemble de @keyframes, mais animez une propriété CSS d'une manière qui contrecarre ou annule le mouvement de l'animation principale. Par exemple, si votre animation principale utilise translateX, vous pouvez animer left ou margin-left dans votre ensemble de retard @keyframes.

Voici quelques exemples:

Pause en changeant transform-origin:

Pause par contre-action transform: translateX en animant le left propriété:

En cas de pause, le translateX animation, vous devrez devenir plus amateur avec le @keyframes si vous avez besoin de suspendre l'animation pendant plus d'une seule itération:

/* pausing the animation for three iterations */
@keyframes slide-left-pause {
  25%, 50%, 75% {
    left: 0;
  }
  37.5%, 62.5%, 87.5% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}

Vous pouvez obtenir une légère gigue pendant la pause. dans le translateX exemple ci-dessus, il y a quelques vibrations mineures sur la balle pendant la slide-left-pause que les animations se battent pour la domination.

Emballer

La meilleure option en termes de performances est de masquer l'élément pendant le retard ou d'animer transform. Animation de propriétés comme left, margin, width sont beaucoup plus intenses sur un processeur que l'animation opacity (Bien que le contain semble changer cela).

Si vous avez des idées ou des commentaires sur cette idée, faites-le moi savoir!


Merci à Yusuke Nakaya pour l'animation CSS des étoiles filantes d'origine que j'ai créée sur CodePen.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *