animation-timing-function

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

La propriété animation-timing-function définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions <easing-function>.

Exemple interactif

animation-timing-function: linear;

animation-timing-function: ease-in-out;

animation-timing-function: steps(5, end);

animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

"use strict";

window.addEventListener("load", () => {
  const el = document.getElementById("example-element");
  const button = document.getElementById("play-pause");

  button.addEventListener("click", () => {
    if (el.classList.contains("running")) {
      el.classList.remove("running");
      button.textContent = "Play";
    } else {
      el.classList.add("running");
      button.textContent = "Pause";
    }
  });
});

Généralement, on pourra utiliser la propriété raccourcie animation pour définir l'ensemble des propriétés liées à une animation.

Syntaxe

css

/* Valeurs avec un mot-clé */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Valeurs fonctionnelles */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

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

/* Définition de temporisations pour plusieurs animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Valeurs globales */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou @keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

Valeurs

<timing-function>

Chaque valeur <easing-function> représente une fonction temporelle à rattacher à une animation définie grâce à animation-name.

Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.

ease

Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.

linear

Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.

ease-in

Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.

ease-out

Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.

ease-in-out

Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.

cubic-bezier(p1, p2, p3, p4)

Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.

steps( n, <jumpterm>)

L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, 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%) :

jump-start: La fonction est continue à gauche et le premier saut se produit au début de l'animation.
jump-end: La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
jump-none: 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).
jump-both: Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
start: Identique à jump-start.
end: Identique à jump-end.

step-start

Synonyme de steps(1, jump-start)

step-end

Synonyme de steps(1, jump-end)

Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, elles seront affectées selon leur ordre aux différentes animations listées par animation-name. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir Paramétrer plusieurs valeurs de propriétés pour les animations.

Définition formelle

Valeur initiale	`ease`
Applicabilité	tous les éléments, ainsi que les pseudo-elements `::before` et `::after`
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	Not animatable

Syntaxe formelle

animation-timing-function = 
  <easing-function>#  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

Exemples

Courbes de Bézier cubiques

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>

.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}

css

.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.linear {
  animation-timing-function: linear;
}
.cb {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

Fonctions en escalier

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="start">start</div>
  <div class="end">end</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}

css

.jump-start {
  animation-timing-function: steps(5, jump-start);
}
.jump-end {
  animation-timing-function: steps(5, jump-end);
}
.jump-none {
  animation-timing-function: steps(5, jump-none);
}
.jump-both {
  animation-timing-function: steps(5, jump-both);
}
.start {
  animation-timing-function: steps(5, start);
}
.end {
  animation-timing-function: steps(5, end);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}

Spécifications

Specification
CSS Animations Level 1 # animation-timing-function
CSS Easing Functions Level 1 # linear-easing-function-parsin