animation-timing-function
=========================

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
------------------

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                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

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 |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les animations CSS
* `<easing-function>`
* L'API JavaScript `AnimationEvent`