animation-timing-function - Propriété CSS
Résumé des caractéristiques de la propriété animation-timing-function
ease
| ease-in
| ease-out
| ease-in-out
| linear
ease
animation-timing-function
ne peut pas être animée.Description.
Définit la dynamique de l'animation. Par exemple, l'animation peut commencer doucement et se terminer rapidement, ou vice-versa, ou au contraire se faire avec une vitesse constante.
Remarque : animation-timing-function
peut aussi être employé dans la syntaxe de @keyframes
,
ce qui permet de définir une dynamique différente pour chacune des étapes de l'animation.
Pour une présentation générale sur les animations, reportez-vous à la page décrivant la propriété résumée animation
.
Syntaxes pour animation-timing-function
.
animation-timing-function:
;
- animation-timing-function: ease;
Valeur par défaut. L'animation démarre lentement, accélère progressivement, prend sa vitesse normale et ralentit avant de se terminer.
- animation-timing-function: linear;
La vitesse de l'animation est constante pendant toute sa durée.
- animation-timing-function: ease-in;
L'animation démarre doucement jusqu'à sa vitesse normale, puis garde une vitesse constante jusqu'à la fin.
- animation-timing-function: ease-out;
L'animation démarre à sa vitesse normale et ralentit avant de se terminer.
- animation-timing-function: ease-in-out;
L'animation démarre et se termine lentement.
- animation-timing-function: steps(9 end); n f
steps(
)
L'animation est jouée par saccades, ici en 9 étapes. Un deuxième paramètre
f
peut être précisé. Il détermine laquelle des étapes sera invisible (temps d'exécution à 0). Par défaut c'est la dernière.
Notez les valeursstep-start
etstep-end
qui sont des syntaxes raccourcies équivalentes respectivement àsteps(1,start)
et àsteps(1,end)
.
Reportez-vous à la description de la fonctionsteps()
pour plus de précisions. - animation-timing-function: cubic-bezier(n,n,n,n);
Définit une courbe de Bézier à partir de 4 valeurs numériques. La vitesse de l'animation sera calquée sur cette courbe.
Voir une description plus complète de la fonctioncubic-bezier()
. - animation-timing-function: linear, ease-in, ...;
Comme pour les autres propriétés relatives aux animations, il est possible de définir une série de valeurs séparées par des virgules, dans le cas où plusieurs animations ont été définies.
Pour plus de précisions sur les animations multiples, consultez la pageanimation
. - animation-timing-function:
initial
; animation-timing-function:inherit
; animation-timing-function:revert
; animation-timing-function:revert-layer
; animation-timing-function:unset
;La valeur initiale est :
.ease
Remarque sur cubic-bezier(n,n,n,n).
Cette syntaxe permet d'ajuster très précisément la vitesse et l'accélération de l'animation pour se rapprocher d'un mouvement réaliste mais les 4 valeurs numériques ne sont pas évidentes à déterminer.
Reportez-vous à cet outil, particulièrement pratique, pour calculer ces paramètres : concepteur de courbe de Bezier.
Manipulation de la propriété animation-timing-function
par programme.
L'élément ci-dessous est animé d'une translation de gauche à droite (modification de sa marge gauche).
Par défaut sa propriété animation-timing-function
est fixée à la valeur linear
,
mais les exemples de code ci-dessous peuvent changer cette valeur de façon dynamique : les modifications prennent effet immédiatement.
Modifier la valeur de animation-timing-function
en Javascript.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec une notation plus courante en JS : camel-case
(une majuscule pour séparer les mots).
function setAnimationTimingFunction(el) {
el.style['animation-timing-function']='ease';
// ou
el.style.animationTimingFunction='ease';
}
Lire en Javascript la valeur de animation-timing-function
.
Le code ci-dessous renvoie la valeur de animation-timing-function
qui a été définie en HTML, par l'attribut style
. La valeur éventuellement
définie via un électeur CSS n'est pas renvoyée.
function getAnimationTimingFunction(el) {
alert(el.style['animation-timing-function']);
// ou
alert(el.style.animationTimingFunction);
}
Lire la valeur calculée de animation-timing-function
en Javascript.
La valeur calculée peut être celle qui est définie sur l'élément lui-même, ou une valeur héritée via le mécanisme d'héritage habituel.
function getCalcAnimationTimingFunction(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-timing-function'));
}
Modifier la valeur de la propriété animation-timing-function
avec JQuery.
function setAnimationTimingFunction(el) {
$(el).css('animation-timing-function','steps(5)');
// ou
$(el).css('animationTimingFunction','steps(5)');
}
Lire la valeur calculée de la propriété animation-timing-function
avec JQuery.
function getCalcAnimationTimingFunction(el) {
alert($(el).css('animation-timing-function'));
// ou
alert($(el).css('animationTimingFunction'));
}
Simulateur.
Le simulateur modifie la propriété animation-timing-function
du bloc bleu.
Le bloc gris est animé pour comparaison avec la valeur linear
.
Prise en charge par les navigateurs (compatibilité).
Très bonne prise en charge par les navigateurs actuels, sauf pour le deuxième paramètre de la fonction steps()
, qui est un peu moins bien traité.
animation-timing-function
.
jump
dans la syntaxe de la fonction steps()
.
animation-timing-function
jump
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que animation-timing-function
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-timing-function
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.