animation-timing-function CSS propriété

Définition de la CSS animation-timing-function.

La propriété d'Animation CSS animation-timing-function permet de spécifier comment progresse l'animation CSS entre les images clés.

Exemple de syntaxe CSS animation-timing-function :
animation-timing-function : linear;
animation-timing-function : ease;
animation-timing-function : ease-in-out;
animation-timing-function : step-start;
animation-timing-function : step-end;
animation-timing-function : steps(2, start);

La propriété d'Animation CSS animation-timing-function accepte une/des valeurs suivantes :

  • ease : équivalent à cubic-bezier(0.25, 0.1, 0.25, 1.0). Valeur par défaut.
    L'animation Css accélère très vite au début et ralentit à la moitié de l'animation.
  • linear : équivalent à cubic-bezier(0.0, 0.0, 1.0, 1.0).
    L'animation Css est jouée de façon linéaire.
  • ease-in : équivalent à cubic-bezier(0.42, 0, 1.0, 1.0).
    L'animation Css démarre lentement et accélère progressivement avant la fin
  • ease-out : équivalent à cubic-bezier(0, 0, 0.58, 1.0).
    L'animation Css démarre rapidement et ralentit progressivement avant la fin.
  • ease-in-out : équivalent à cubic-bezier(0.42, 0, 0.58, 1.0).
    Dans la moitié de la transition Css, elle se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.
  • step-start : équivalent à steps(1, start).
    L'animation Css comporte une seule étape et elle est jouée au début de l'étape.
  • step-end : équivalent à steps(1, end).
    L'animation Css comporte une seule étape et elle est jouée à la fin de l'étape.
  • steps(n, mot cle) : nombre positif et les mots clés start ou end, steps(2,start).
    L'animation Css est divisée en n étape(s) et elle est jouée au début de l'étape si start ou en fin si end. Si vous avez une transition de 15s et trois étapes soit une étape de 5 secondes. Si je suis start, je suis joué quand je rentre dans l'étape, si je suis end, je suis joué à la fin des 5s de l'étape.
  • cubic-bezier : quatre valeurs qui spécifient les points P1 et P2 de la courbe de bezier (x1, y1, x2, y2). x1, y1, x2, y2 sont des nombres décimaux avec au moins un chiffre après la virgule. Les X doivent être compris entre 0 et 1.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Conditions d'application de la CSS animation-timing-function.

La valeur de la CSS animation-timing-function peut être mise directement dans la propriété de raccourci CSS .

Héritage des valeurs Css de animation-timing-function.

La valeur de la fonction d'Animation CSS animation-timing-function n'est pas héritée.

Problème d'interprétation de animation-timing-function en Css.

La propriété d'Animation CSS animation-timing-function pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-timing-function.

cubic-bezier()

Exemple des progressions du temps :

ease linear ease-in ease-out ease-in-out
         
source : msdn.microsoft.com

cubic-bezier() permet de définir une courbe de Bézier cubique. Elle permet d'accélérer ou de diminuer la vitesse de l'animation en début ou fin d'animation.

La courbe de Bézier cubique est définie par quatre points P0, P1, P2, et P3.
P0 et P3 représentent le début et la fin de la courbe et, dans CSS ces points sont fixés comme les coordonnées sont des rapports (en abscisse le rapport des temps, en ordonnée le rapport de la zone de sortie). P0 est (0, 0) et représente l'instant initial et l'état initial, P3 est (1, 1) et représente le temps final et l'état final.

Exemple de code :
cubic-bezier(<X p1>, <Y p1>, <X p2>, <Y p2>);

Enfin bref!, le mieux c'est d'aller sur cubic-bezier.com
Si la courbe de Bézier cubique est invalide, la propriété est ignorée.

Règles d'écriture de la fonction d'Animation CSS : animation-timing-function

La propriété d'Animation CSS animation-timing-function accepte une ou plusieurs valeurs citées ci-dessus qui seront séparées par une virgule.
Le nombre de valeur est lié au nombre de nom d'animation déclarés dans la propriété d'Animation CSS .
Si vos fonctions sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de animation-timing-function : 
.mes-animations{
  animation-name : animation-une, animation-deux;
  animation-timing-function : ease-in-out, ease;
}

Compatibilités navigateurs de la propriété animation-timing-function

Détails des versions de la CSS animation-timing-function
Résumé du support navigateurs de la CSS animation-timing-function

Propriétés CSS préfixées de animation-timing-function

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-timing-function CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-timing-function.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-timing-function (n'est pas pris en compte si les valeurs Y sont pas entre 0 et 1 pour la fonction cubic-bezier).
Pour Opera 12+, vous pouvez utiliser : -o-animation-timing-function. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation-timing-function mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-timing-function


Votre avis sur la définition animation-timing-function en CSS

Votez pour la définition CSS animation-timing-function

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/animation-timing-function-css.html Votes: 4.7 / 5 - 3 votes
Cliquez sur une étoile pour voter.