Un exemple d'introduction à la fonction de synchronisation d'animation en CSS3

animation-timging-function est principalement utilisée pour contrôler la vitesse de l'animation CSS du début à la fin.

• linéaire : transition linéaire. Equivalent à la courbe de Bézier (0.0, 0.0, 1.0, 1.0)

• facilité : transition en douceur. Equivalent à la courbe de Bézier (0,25, 0,1, 0,25, 1,0)

• facilité : de lent à rapide. Equivalent à la courbe de Bézier (0,42, 0, 1,0, 1,0)

• allègement : de rapide à lent. Equivalent à la courbe de Bézier (0, 0, 0,58, 1,0)

• facilité d'entrée : de lent à rapide puis à ralentir. Équivalent à la courbe de Bézier (0,42, 0, 0,58, 1,0)

• step-start : Équivalent aux étapes (1, start)

• step-end : équivalent à steps(1, end)

• steps([, [ start | end ] ]?) : Une fonction pas à pas qui accepte deux paramètres. Le premier paramètre doit être un entier positif précisant le nombre d'étapes de la fonction. La valeur du deuxième paramètre peut être start ou end, spécifiant le moment où la valeur de chaque étape change. Le deuxième paramètre est facultatif et la valeur par défaut est end.

• cubic-bezier(, , , ) : Type de courbe de Bézier spécifique, 4 La valeur doit être dans l'intervalle [0, 1]

Ici, nous introduisons principalement les steps()

.heart{background-image: url('images/heart-sprite.png');-webkit-animation: animate 1s steps(28) infinite;animation: animate 1s steps(28) infinite;
}@keyframes animate {
  from {background-position: 0 0;}
  to {background-position: -2800px 0;}}

steps() Définissez le paramètre d'intervalle pour réaliser une transition étape par étape

Le premier paramètre spécifie le nombre d'intervalles dans la fonction temps (doit être un nombre entier positif)
Le deuxième paramètre est facultatif et accepte deux valeurs : start et end, spécifiant un changement d'étape au point de départ ou au point final de chaque intervalle, la valeur par défaut est end.

• Vert clair = Pris en charge

• Rouge = Non pris en charge

• Rose = Partiellement pris en charge

Valeurs

IE

Firefox

Chrome

Safari

Opera

iOS Safari

Navigateur Android

Android Chrome

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-9.0	2.0-4.0	4.0-42.0-webkit-	6.0-8.0-webkit-	15.0-29.0-webkit-	6.0-8.4-webkit-	2.1-3.0-webkit-#1	18.0-42.0-webkit-
	10.0+	5.0-15.0-moz-	43.0+	9.0+	30.0+	9.0+	4.0-40.0-webkit-
		16.0+

Support de base

6.0-9.0

2.0-4.0

4.0 -42.0^-webkit-

6.0-8.0^-webkit-

15.0-29.0^-webkit-

6.0-8.4 ^-webkit-

2.1-3.0^-webkit-#1

18.0-42.0^-webkit-

10.0+

5.0-15.0^-moz-

43,0+

9,0+

30,0+

9.0+

4.0-40.0^-webkit- td>

16.0+

Dans certains scénarios, il y aura Mauvais comportement

Certains navigateurs ne prennent pas en charge l'animation de pseudo-éléments, ou la prise en charge n'est pas suffisante. Essayez de ne pas utiliser de pseudo-éléments pour l'animation

.

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!