Propriété CSS transition-timing-function

❮ Précédent Suivant ❯

La propriété CSS transition-timing-function spécifie la transition en cours sur sa durée permettant de modifier la vitesse.

Elle a les valeurs suivantes:

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end

Pour la compatibilité maximale des navigateurs, des extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox,-o- pour les plus anciennes versions d'Opera, sont utilisées avec cette propriété.

Valeur initiale	ease
Appliquée à	Tous les éléments, les pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionTimingFunction = "ease in";

Syntaxe

transition-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> 
      .box {
      padding: 2em;
      width: 40px;
      height: 40px;
      left: 0;
      background-color: #666;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      -webkit-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -moz-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -o-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
      left: 450px;
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-timing-function</h2>
    <p>Placez la souris sur l'élément pour voir l'effet</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple qui contient les valeurs "ease", "linear", "ease-in" et "ease-out":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      padding: 2em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      border-radius: 50%;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-timing-function:  ease;
      -moz-transition-timing-function:  ease;
      -o-transition-timing-function:  ease;
      transition-timing-function:  ease;
      }
      .el2 {
      -webkit-transition-timing-function:  linear;
      -moz-transition-timing-function:  linear;
      -o-transition-timing-function:  linear;
      transition-timing-function:  linear;
      }
      .el3 {
      -webkit-transition-timing-function:  ease-in;
      -moz-transition-timing-function:  ease-in;
      -o-transition-timing-function:  ease-in;
      transition-timing-function:  ease-in;
      }
      .el4 {
      -webkit-transition-timing-function:  ease-out;
      -moz-transition-timing-function:  ease-out;
      -o-transition-timing-function:  ease-out;
      transition-timing-function:  ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transition-timing-function </h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple avec les valeurs "step-start" et "step-end":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      padding: 2em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      border-radius: 50%;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-timing-function:  step-start;
      -moz-transition-timing-function:  step-start;
      -o-transition-timing-function:  step-start;
      transition-timing-function:  step-start;
      }
      .el2 {
      -webkit-transition-timing-function:  step-end;
      -moz-transition-timing-function:  step-end;
      -o-transition-timing-function:  step-end;
      transition-timing-function:  step-end;
      }
    </style>
  </head>
  <body>
    <h2> Exemple de la propriété transition-timing-function</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
ease	L'effet de transition commence lentement, puis devient plus rapide et se termine lentement. Ceci est la valeur par défault.
linear	L'effet de transition commence à la même vitesse.
ease-in	L'effet de transition commence lentement, mais devient plus rapide à la fin et s'arrête brusquement.
ease-out	L'effet de transition commence rapidement, mais ralentit à la fin.
ease-in-out	L'effet de transition commence lentement et se termine lentement.
step-start	Égal à 1, start.
step-end	Égal à 1, end.
steps(int,start\|end)	Spécifie une fonction progressive avec deux paramètres. Le premier paramètre spécifie le nombre d'intervalles dans la fonction. Il doit être supérieur à 0. Le deuxième paramètre est la valeur "start" ou "end" et spécifie le point auquel le changement de valeur a lieu dans l'intervalle. Si le second paramètre n'est pas appliqué, la valeur "end" est donnée.
cubic-bezier (n,n,n,n)	Définit les valeurs par la fonction cubic-bezier.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.