Style animationTimingFunction Property
Exemple
Modification de la propriété animationTimingFunction d'un élément <div> :
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Définition et utilisation
L'animationTimingFunction spécifie la courbe de vitesse de l'animation.
La courbe de vitesse définit le TEMPS qu'une animation utilise pour passer d'un ensemble de styles CSS à un autre.
La courbe de vitesse est utilisée pour effectuer les changements en douceur.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de Moz spécifient la première version qui a fonctionné avec un préfixe.
| Property | |||||
|---|---|---|---|---|---|
| animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Syntaxe
Renvoyez la propriété animationTimingFunction :
object.style.animationTimingFunction
Définissez la propriété animationTimingFunction :
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Valeurs de propriété
| Value | Description |
|---|---|
| linear | The animation has the same speed from start to end |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly |
| ease-in | The animation has a slow start |
| ease-out | The animation has a slow end |
| ease-in-out | The animation has both a slow start and a slow end |
| cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
| Valeur par défaut: | faciliter |
|---|---|
| Valeur de retour : | Une chaîne, représentant la propriété animation-timing-function d'un élément |
| Version CSS | CSS3 |
Pages connexes
Référence CSS : propriété animation-timing-function