w3docs logo

Propriété CSS animation-timing-function

La propriété animation-timing-function définit comment la vitesse de l'animation va changer pendant chaque cycle, et pas pandent l'animation entière.

Elle a les valeurs suivantes:

  • ease - (par défaut) l'animation commence lentement, puis devient plus rapide et se termine lentement.
  • ease-in - L'animation a un début lent, mais accélère à la fin et s'arrête brusquement.
  • ease-out - l'animation commence rapidement, mais finit lentement.
  • ease-in-out -l'animation commence et finit lentement.
  • step-start- Étapes équivalentes 1, start.
  • step-end- Étapes équivalentes 1, end.
  • linear - l'animation a la même vitesse lors d'une animation; le plus souvent utilisé pour changer de couleur ou d'opacité..
  • steps(int,start|end)- Une fonction pas à pas qui prend deux paramètres. Le nombre d'étapes détermine un entier positif. Le deuxième paramètre (facultatif) spécifie le moment où l'animation commence. Avec la valeur "start", l'animation commence au début de chaque étape, avec la valeur "end", à la fin de chaque étape avec un délai. Le délai est calculé en divisant le temps d'animation par le nombre d'étapes. Si le second paramètre n'est pas spécifié, la valeur par défaut est "end".
  • cubic-bezier (n,n,n,n) - Vous permet d'entrer vos propres valeurs de 0 à 1.
Valeur initiale ease
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after
Héritée Non
Animable Non
Version CSS3
Syntaxe DOM object.style.animationTimingFunction = "linear";

Syntaxe

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

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s infinite; /* Safari 4.0 - 8.0 */
      -webkit-animation-timing-function: ease; /* Safari 4.0 - 8.0 */
      animation: element 5s infinite;
      animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
      @keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-timing-function</h2>
    <div></div>
  </body>
</html>

Un autre exemple avec la valeur "ease-in".

Exemple

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: #8ebf42;
  position: relative;
  -webkit-animation: element 7s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-timing-function: ease-in; /* Safari 4.0 - 8.0 */
  animation: element 7s infinite;
  animation-timing-function: ease-in;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
  from {left: 0px;}
  to {left: 200px;}
}
@keyframes element {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>
<h1>Propriété animation-timing-function</h1>
<div></div>
</body>
</html>

Voyons un exemple, où les différents fonctions du temps sont illustrées.

Exemple

<!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;
      -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
      animation: mymove 5s infinite;
      }
      /* Safari 4.0 - 8.0 */
      #div1 {-webkit-animation-timing-function: linear;}
      #div2 {-webkit-animation-timing-function: ease;}
      #div3 {-webkit-animation-timing-function: ease-in;}
      #div4 {-webkit-animation-timing-function: ease-out;}
      #div5 {-webkit-animation-timing-function: ease-in-out;}
      #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;}
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
      @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-timing-function</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

Valeur Description
ease L'animation commence lentement, puis devient plus rapide et se termine lentement. C'est la valeur initiale.
linear L'animation commence à la même vitesse.
ease-in L'animation a un début lent, mais accélère à la fin et s'arrête brusquement.
ease-out L'animation commence rapidement, mais finit lentement.
ease-in-out L'animation commence et finit lentement.
step-start Étapes équivalentes à 1, start.
step-end Étapes équivalentes à 1, end.
steps(int,start|end) Une fonction pas à pas qui prend deux paramètres. Le nombre d'étapes détermine un entier positif. Le deuxième paramètre (facultatif) spécifie le moment où l'animation commence. Avec la valeur "start", l'animation commence au début de chaque étape, avec la valeur "end", à la fin de chaque étape avec un délai. Le délai est calculé en divisant le temps d'animation par le nombre d'étapes. Si le second paramètre n'est pas spécifié, la valeur par défaut est "end".
cubic-bezier (n,n,n,n) Vous permet d'entrer vos propres valeurs de 0 à 1 par la fonction cubic-bezier.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Pratiquez vos connaissances

Qu'est-ce que la fonction de synchronisation d'animation en CSS?
Trouvez-vous cela utile?