Propriété CSS animation-timing-function

La propriété animation-timing-function définit comment une animation progresse pendant la durée de chaque cycle — et non sur l'ensemble de l'animation. Elle détermine la courbe de vitesse de l'animation : le rythme auquel l'élément animé passe d'une image-clé à la suivante.

Cette page explique le rôle de la propriété, toutes les valeurs qu'elle accepte (y compris cubic-bezier() et steps()), comment elle interagit avec @keyframes et le raccourci animation, ainsi que les pièges courants.

Pourquoi la fonction de temporisation est importante

La durée d'une animation indique combien de temps dure un cycle ; la fonction de temporisation précise comment ce temps est réparti. Avec une même durée de 5 secondes, linear avance à vitesse constante, tandis que ease démarre lentement, accélère en milieu de course et se termine en douceur. Choisir la bonne courbe fait la différence entre un mouvement qui paraît mécanique et un mouvement qui semble naturel.

Les fonctions de temporisation définissent l'interpolation entre les images-clés. Cela signifie que vous pouvez définir une fonction de temporisation différente sur des images-clés individuelles à l'intérieur de @keyframes — la fonction s'applique de cette image-clé à la suivante, et non à toute l'animation. Si une image-clé n'en spécifie pas, la valeur animation-timing-function de l'élément est utilisée pour cet intervalle.

La propriété animation-timing-function fait partie des propriétés CSS3.

Elle peut prendre les valeurs suivantes :

• ease — (par défaut) Démarre lentement, puis s'accélère, et se termine lentement.
• ease-in — Démarre lentement, mais accélère à la fin.
• ease-out — Démarre rapidement, mais ralentit à la fin.
• ease-in-out — Démarre lentement et se termine lentement.
• step-start — Équivalent à steps(1, start).
• step-end — Équivalent à steps(1, end).
• linear — L'animation garde la même vitesse pendant toute sa durée, souvent préférable pour les changements de couleur ou d'opacité.
• steps(int, start|end) — Définit une fonction en escalier avec deux paramètres. Le premier paramètre définit le nombre d'intervalles dans la fonction. Il doit être supérieur à 0. Le second paramètre vaut "start" ou "end" et indique le moment où le changement de valeurs se produit dans l'intervalle. Si le second paramètre est omis, "end" est utilisé.
• cubic-bezier(n,n,n,n) — Définit des valeurs personnalisées pour la fonction de courbe de Bézier cubique. Les deux premiers paramètres définissent les coordonnées X et doivent être compris entre 0 et 1. Les deux derniers paramètres définissent les coordonnées Y et peuvent être n'importe quel nombre.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées, elles sont associées dans l'ordre aux animations définies dans animation-name. S'il y a moins de fonctions de temporisation que d'animations, la liste est répétée pour correspondre au nombre d'animations.

Comprendre cubic-bezier()

Tous les mots-clés nommés sont des raccourcis vers une courbe cubic-bezier(). La fonction prend quatre nombres — cubic-bezier(x1, y1, x2, y2) — qui sont les deux points de contrôle d'une courbe de Bézier allant de (0,0) à (1,1). L'axe X représente le temps (qui doit rester compris entre 0 et 1) et l'axe Y représente la progression de l'animation (qui peut déborder en dessous de 0 ou au-dessus de 1 pour créer des effets de "rebond" ou d'"anticipation").

Les mots-clés nommés sont équivalents à :

• linear → cubic-bezier(0, 0, 1, 1)
• ease → cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in → cubic-bezier(0.42, 0, 1, 1)
• ease-out → cubic-bezier(0, 0, 0.58, 1)
• ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

steps() et les animations en escalier

Alors que cubic-bezier() produit un mouvement fluide, steps() saute entre des états discrets — utile pour les animations de feuilles de sprites ou le clignotement d'un curseur de saisie. steps(4, end) divise l'animation en 4 sauts égaux ; start fait que le premier saut se produit immédiatement, tandis que end (la valeur par défaut) le reporte à la fin de chaque intervalle.

Pièges courants

• Elle n'est pas héritée et n'est pas animable. Vous ne pouvez pas effectuer de transition sur la fonction de temporisation elle-même.
• L'ordre est important dans le raccourci. Dans le raccourci animation, la fonction de temporisation et animation-delay sont toutes deux des valeurs <time>-or-keyword ; la première valeur <time> est interprétée comme la durée et la seconde comme le délai, donc placez votre fonction de temporisation avant la valeur de délai.
• Les fonctions par image-clé ont la priorité. Une fonction de temporisation déclarée sur une image-clé dans @keyframes remplace la valeur de la propriété pour ce segment.

Syntaxe

Syntaxe de la propriété CSS animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Exemple de la propriété animation-timing-function avec la valeur "ease" :

Exemple de la propriété CSS animation-timing-function avec la valeur ease

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Exemple de la propriété animation-timing-function avec la valeur "ease-in" :

Exemple de la propriété CSS animation-timing-function avec la valeur ease-in

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Exemple de la propriété animation-timing-function avec différentes fonctions de temporisation :

Exemple de la propriété CSS animation-timing-function avec les valeurs linear, ease, ease-in, ease-out et ease-in-out

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        animation: mymove 5s infinite;
      }
      #div1 {
        animation-timing-function: linear;
      }
      #div2 {
        animation-timing-function: ease;
      }
      #div3 {
        animation-timing-function: ease-in;
      }
      #div4 {
        animation-timing-function: ease-out;
      }
      #div5 {
        animation-timing-function: ease-in-out;
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Valeurs

Propriétés associées

• animation — le raccourci qui définit la fonction de temporisation avec le nom, la durée, le délai et plus encore.
• @keyframes — où vous définissez les images-clés entre lesquelles la fonction de temporisation interpole.
• animation-duration — définit la durée d'un cycle ; la fonction de temporisation répartit le mouvement sur cette durée.
• animation-name — associe l'élément à une règle @keyframes.
• transition-timing-function — le même concept de courbe de vitesse appliqué aux transitions plutôt qu'aux animations par images-clés.

Exercice