Exemple
Modification de la propriété animationTimingFunction d'un <div> élément:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Essayez vous - même » Définition et utilisation
Le animationTimingFunction indique la courbe de vitesse de l'animation.
La courbe de vitesse définit le temps d'une animation utilise pour passer d'un ensemble de styles CSS à l'autre.
La courbe de vitesse est utilisée pour effectuer les changements en douceur.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Les chiffres suivis par Moz précisent la première version qui a travaillé avec un préfixe.
Propriété | |||||
---|---|---|---|---|---|
animationTimingFunction | 43,0 | Non supporté | 16,0 5,0 Moz | Non supporté | 30,0 |
Syntaxe
Retour la propriété animationTimingFunction:
object .style.animationTimingFunction
Définissez la propriété animationTimingFunction:
object .style.animationTimingFunction="linear|ease|ease-in|ease-out|cubic-bezier( Valeurs de propriété Valeur La description linear L'animation a la même vitesse du début à la fin ease Valeur par défaut. L'animation a un démarrage lent, puis rapide, avant qu'elle ne se termine lentement ease-in L'animation a un démarrage lent ease-out L'animation a une fin lente ease-in-out L'animation est à la fois un démarrage lent et une extrémité lente 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 d'animation-timing d'un élément version CSS CSS3
Pages associées
Référence CSS: la animation-timing-function property
<Style objet