Derniers tutoriels de développement web
 

Style animationTimingFunction Property

<Style objet

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