CSS3 propriété transition-timing-function
Exemples
Transitions à la même vitesse du début à la fin:
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Essayez »
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.
属性 | |||||
---|---|---|---|---|---|
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Définition des attributs et des instructions
la propriété transition-timing-function spécifie une vitesse d'effet de transition.
Cette propriété permet un effet de transition pour changer la vitesse de sa durée.
Par défaut: | facilité |
---|---|
Héritage: | aucun |
Version: | CSS3 |
Syntaxe JavaScript: | objet .style.transitionTimingFunction = "linéaire" |
grammaire
valeur | description |
---|---|
linéaire | Ravitaillement à la même vitesse pour commencer les extrémités de l'effet de transition (égale cubique-Bézier (0,0,1,1)). |
facilité | Provision démarrage lent, puis plus rapidement, puis plus lentement fin des effets de transition (cube-Bézier (0.25,0.1,0.25,1)). |
facilité dans | Dispositions transitoires à l'effet d'un démarrage lent (égal au cube-Bézier (0.42,0,1,1)). |
facilité à | Provisions à la fin des effets de transition lente (cube-Bézier équivalent (0,0,0.58,1)). |
facilité in-out | Dispositions transitoires en effet commence et se termine lentes (cube-Bézier égal (0.42,0,0.58,1)). |
Bézier cubique (n, n,n, n) | Vous définissez vos propres valeurs dans la fonction cubique-Bézier. Valeur possible est un nombre compris entre 0-1. |
Astuce: Essayez les différentes valeurs dans les exemples ci - dessous pour comprendre comment il fonctionne!
D'autres exemples
Exemples
Pour mieux comprendre la fonction des valeurs différentes: Il y a cinq éléments div différentes, avec cinq valeurs différentes:
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
Essayez »
Exemples
Et l'exemple ci-dessus, mais spécifie la courbe de vitesse fonction cubique de Bézier:
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Essayez »