Exemple
Modifier la courbe de vitesse d'un effet de transition:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Essayez vous - même » Définition et utilisation
La propriété transitionTimingFunction indique la courbe de vitesse de l'effet de transition.
Cette propriété permet un effet de transition pour changer la vitesse sur sa durée.
Support du navigateur
La propriété transitionTimingFunction est pris en charge dans Internet Explorer 10, Firefox, Opera et Chrome.
Safari prend en charge une alternative, la propriété WebkitTransitionTimingFunction.
Note: La propriété transitionTimingFunction est pas pris en charge dans Internet Explorer 9 et les versions antérieures.
Syntaxe
Retour la propriété transitionTimingFunction:
object .style.transitionTimingFunction Définissez la propriété transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Valeurs de propriété
| Valeur | La description |
|---|---|
| ease | Valeur par défaut. Indique un effet de transition avec un démarrage lent, puis rapide, fin puis lentement (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Indique un effet de transition avec la même vitesse du début à la fin (equivalent to cubic- bezier(0,0,1,1) ce qui (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Indique un effet de transition avec un démarrage lent (équivalent à cubic- bezier(0.42,0,1,1) ) |
| ease-out | Indique un effet de transition avec une extrémité lente (équivalent à cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Indique un effet de transition avec un lent démarrage et à la fin ( ce qui équivaut à cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Définissez vos propres valeurs dans la fonction cubique Bézier. Les valeurs possibles sont des valeurs numériques de 0 à 1 |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial |
| inherit | Hérite cette propriété de son élément parent. En savoir plus sur hériteront |
Détails techniques
| Valeur par défaut: | facilité |
|---|---|
| Valeur de retour: | Une chaîne, ce qui représente la propriété de la fonction de transition de cadencement d'un élément |
| version CSS | CSS3 |
Pages associées
Référence CSS: la transition-timing-function property de transition-timing-function property
<Style objet