Animation-timing-function - Propriété CSS

Syntaxe de animation-timing-function (schéma).

Description de la propriété animation-timing-function.

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é comme descripteur dans la syntaxe de @keyframes, ce qui permet de définir une dynamique différente pour chacun des segments de l'animation.

Pour une présentation générale sur les animations, reportez-vous à la page décrivant les animations en CSS.

Valeurs 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: 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: linear; animation-timing-function: linear(0, 0.75, 1);

  Avec la valeur linear, la vitesse de l'animation est constante pendant toute sa durée.

  Mais la fonction linear() permet maintenant d'indiquer des paramètres et de définir plusieurs segment de droite. La valeur linear est un raccourci pour linear(0, 1). Reportez vous à la fonction linear() pour plus de précisions.
• animation-timing-function: steps(9 end); n f

  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 valeurs step-start et step-end qui sont des syntaxes raccourcies équivalentes respectivement à steps(1,start) et à steps(1,end).
  Reportez-vous à la description de la fonction steps() 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 fonction cubic-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 page animation.

• @keyframes demo { from { width: 0px; animation-timing-function: linear; } 50% { width: 50%; animation-timing-function: steps(10); } to { width: 100%; } }

  Enfin, pour terminer, voici un exemple d'utilisation de animation-timing-function en tant que descripteur pour @keyframes. Dans ce cas, le descripteur est prioritaire sur la propriété pour les segments où il est défini.

  Pour davantage de précisions, reportez-vous à la page sur @keyframes
• 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.

La propriété animation-timing-function et Javascript.

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-in-out'; // ou let el = document.getElementById('id'); el.style.animationTimingFunction = 'ease-in-out';

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-in-out');
// ou
$('#id').css('animationTimingFunction', 'ease-in-out');


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.

Support de animation-timing-function.

Très bonne prise en charge par les navigateurs actuels.

1

Support des
animations

2

Propriété
animation-timing-function

3

Valeur
jump

Estimation de la prise en charge globale.

97%

96%

95%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Évolution 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 2009

  Document de travail.

  

  

  

• Module CSS - Fonctions d'accélération - Niveau 1

  Description des différentes dynamiques d'animation : linear, ease, etc.
  

  21 Février 2017

  Document de travail.

  

  30 Avril 2019

  Candidat à la recommandation.

  

  

• Module CSS - Animations Niveau 2

  Pas de changement concernant la propriété animation-timing-function.
  

  02 Mars 2023

  Document de travail.

  

  

  

• Module CSS - Fonctions d'accélération - Niveau 2

  Pas de changement concernant les dynamiques d'animation.
  

  29 Août 2024

  Document 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 :

Propriétés :

Directives :

Fonctions :