path: root/files/fr/web/css/transition-timing-function/index.html

---
title: transition-timing-function
slug: Web/CSS/transition-timing-function
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/transition-timing-function
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>transition-timing-function</code></strong> décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">effet de transition</a> sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.</p>

<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>

<p>Cette courbe d'accelération est définie en utilisant une {{cssxref("&lt;timing-function&gt;")}} pour chacune des propriétés à animer.</p>

<p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p>

<ul>
 <li>S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (<code>ease</code>).</li>
 <li>S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension.</li>
</ul>

<p>Dans les deux cas, la déclaration CSS reste valide.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">/* Valeurs avec un mot-clé */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Valeurs fonctionnelles */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Valeurs avec une fonction en escalier */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Utilisation de plusieurs fonctions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Valeurs globales */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;timing-function&gt;</code></dt>
 <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}.
 <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.</p>

 <dl>
  <dt><code>ease</code></dt>
  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.</dd>
  <dt><code>linear</code></dt>
  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : la transition s'effectue à vitesse constante.</dd>
  <dt><code>ease-in</code></dt>
  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
  <dt><code>ease-out</code></dt>
  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : la transition commence rapidement puis ralentit jusqu'à la fin.</dd>
  <dt><code>ease-in-out</code></dt>
  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
  <dd>La transition s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
  <dl>
   <dt><code>jump-start</code></dt>
   <dd>La fonction est continue à gauche et le premier saut se produit au début de la transition.</dd>
   <dt><code>jump-end</code></dt>
   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de la transition.</dd>
   <dt><code>jump-none</code></dt>
   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
   <dt><code>jump-both</code></dt>
   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.</dd>
   <dt><code>start</code></dt>
   <dd>Identique à <code>jump-start.</code></dd>
   <dt><code>end</code></dt>
   <dd>Identique à <code>jump-end.</code></dd>
  </dl>
  </dd>
  <dt><code>step-start</code></dt>
  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
  <dt><code>step-end</code></dt>
  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
 </dl>
 </dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<div>
<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>

<pre class="brush:html hidden">&lt;div class="parent"&gt;
  &lt;div class="ease"&gt;ease&lt;/div&gt;
  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
  &lt;div class="linear"&gt;linear&lt;/div&gt;
  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush:css hidden">.parent {}
.parent &gt; div[class] {
    width: 12em;
    min-width: 12em;
    margin-bottom: 4px;
    background-color: black;
    border: 1px solid red;
    color: white;
    transition-property: all;
    transition-duration: 7s;
}
.parent &gt; div.box1{
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
    transition-property: all;
    transition-duration: 2s;
}
</pre>

<pre class="brush:js hidden">function updateTransition() {
  var els = document.querySelectorAll(".parent &gt; div[class]");
  for(var c = els.length, i = 0; i &lt; c; i++) {
     els[i].classList.toggle("box1");
  }
}

var intervalID = window.setInterval(updateTransition, 10000);
</pre>

<pre class="brush: css">.ease {
   transition-timing-function: ease;
}
.easein {
   transition-timing-function: ease-in;
}
.easeout {
   transition-timing-function: ease-out;
}
.easeinout {
   transition-timing-function: ease-in-out;
}
.linear {
   transition-timing-function: linear;
}
.cb {
   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}</pre>

<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
</div>

<div>
<h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3>

<pre class="brush:html hidden">&lt;div class="parent"&gt;
  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush:css hidden">.parent {}
.parent &gt; div[class] {
    width: 12em;
    min-width: 12em;
    margin-bottom: 4px;
    background-color: black;
    border: 1px solid red;
    color: white;
    transition-property: all;
    transition-duration:7s;
}
.parent &gt; div.box1{
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
    transition-property: all;
    transition-duration:2s;
}
</pre>

<pre class="brush:js hidden">function updateTransition() {
  var els = document.querySelectorAll(".parent &gt; div[class]");
  for(var c = els.length, i = 0; i &lt; c; i++) {
     els[i].classList.toggle("box1");
  }
}

var intervalID = window.setInterval(updateTransition, 10000);
</pre>

<pre class="brush: css">.jump-start {
   transition-timing-function: steps(5, jump-start);
}
.jump-end {
   transition-timing-function: steps(5, jump-end);
}
.jump-none {
   transition-timing-function: steps(5, jump-none);
}
.jump-both {
   transition-timing-function: steps(5, jump-both);
}
.step-start {
   transition-timing-function: step-start;
}
.step-end {
   transition-timing-function: step-end;
}</pre>

<div>{{EmbedLiveSample("Fonctions_en_créneaux")}}</div>
</div>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.</p>

<p>Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">la requête média sur la réduction de mouvements</a> afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État/th&gt;</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.transition-timing-function")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
 <li>{{domxref("TransitionEvent")}}</li>
</ul>