Recommandation de cours :

Fonction steps() de CSS

Définition et utilisation de CSS steps() La fonction est utilisée pour créer des fonctions de temps en étapes pour l'animation.

Cette fonction divise la durée de l'animation en intervalles égaux spécifiés (n). Par exemple : si n est 4, l'animation est divisée en 4 parties. Elle divise la durée de 0% à 100% en 4 parties ;分别是 0%-25%、25%-50%、50%-75% 和 75%-100%.

Exemple

Créez des fonctions de temps en étapes différentes pour l'animation :

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Essayez-le vous-même

Syntaxe CSS

steps(n, step-position)
Valeur Description
n Obligatoire. Spécifiez le nombre d'étapes/intervalles.
step-position

Optionnel. Spécifiez le moment où les sauts entre les valeurs se produisent. Utilisez l'un des mots-clés suivants :

  • jump-start ou start : la première étape se produit au début de l'animation
  • jump-end ou end : l'étape finale se produit à la fin de l'animation. end est la valeur par défaut
  • jump-none : aucun saut anticipé ou retard
  • jump-both : saut anticipé et retard simultanés

Détails techniques

Version : Fonctions d'effets CSS Level 1

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Pages connexes

Référence :Propriété animation CSS

Référence :Propriété animation-timing-function CSS