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 | lineareaseanimation-timing-function ne peut pas être animée.Schéma syntaxique de animation-timing-function.
animation-timing-functionCliquez sur le schéma pour plus de détails sur les valeurs
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: 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
L'animation est jouée par saccades, ici en 9 étapes. Un deuxième paramètre
fpeut ê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-startetstep-endqui 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.
Valeurs universelles :
animation-timing-function: initial (ease)
animation-timing-function: inherit
animation-timing-function: revert
animation-timing-function: revertLayer
animation-timing-function: unset
Liens vers la présentation de ces valeurs : initial, inherit, revert, revert-layer, unset.
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.
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).
let el = document.getElementById('id');
el.style['animation-timing-function'] = 'ease';
// ou
let el = document.getElementById('id');
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.
let el = document.getElementById('id');
let value = el.style['animation-timing-function'];
// ou
let el = document.getElementById('id');
let value = 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. A défaut ce sera
la valeur initiale de la propriété (ease dans le cas de animation-timing-function) mais la valeur calculée est toujours définie.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('animation-timing-function');
Modifier la valeur de la propriété animation-timing-function avec JQuery.
$('#id').css('animation-timing-function', 'ease');
// ou
$('#id').css('animationTimingFunction', 'ease');
Lire la valeur calculée de la propriété animation-timing-function avec JQuery.
let value = $('#id').css('animation-timing-function');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-timing-function et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de animation-timing-function.
Simulateur avec la propriété animation-timing-function.
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(). animations
animation-timing-functionjumpNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété animation-timing-function.
-
Module CSS - Animations Niveau 1
Première présentation des animations en CSS, et des propriétés correspondantes.
20 Mars 2009Document de travail.
-
Module CSS - Fonctions d'accélération - Niveau 1
Description des différentes dynamiques d'animation :linear,ease, etc.21 Février 2017Document de travail.30 Avril 2019Candidat à la recommandation. -
Module CSS - Animations Niveau 2
Pas de changement concernant la propriétéanimation-timing-function.02 Mars 2023Document de travail. -
Module CSS - Fonctions d'accélération - Niveau 2
Pas de changement concernant les dynamiques d'animation.29 Août 2024Document de travail.
Voir aussi, au sujet des animations.
La norme CSS est divisée en modules, chacun de ces modules évoluant à son rythme (niveau 1, niveau 2...). Les animations sont décrites dans le module CSS Animations. Vous y trouverez également la définition des termes ci-après :