Maison >interface Web >tutoriel HTML >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(
cubic-bezier(
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
etend
, spécifiant un changement d'étape au point de départ ou au point final de chaque intervalle, la valeur par défaut estend
.
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 | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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+ |
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!