animation-fill-mode
===================

La propriété **`animation-fill-mode`** indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Gestion de plusieurs animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

### Valeurs

`none`

L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.

`forwards`

La cible retiendra les valeurs calculées définies lors de la dernière étape (*keyframe*). La dernière étape considérée dépend de la valeur de `animation-direction` et de `animation-iteration-count` :

| `animation-direction` | `animation-iteration-count` | dernière *keyframe* |
| --- | --- | --- |
| `normal` | pair ou impair | `100%` ou `to` |
| `reverse` | pair ou impair | `0%` ou `from` |
| `alternate` | pair | `0%` ou `from` |
| `alternate` | impair | `100%` ou `to` |
| `alternate-reverse` | pair | `100%` ou `to` |
| `alternate-reverse` | impair | `0%` ou `from` |

`backwards`

L'animation appliquera les valeur définies par la première *keyframe* pertinente et les retiendra pendant la durée indiquée par `animation-delay`. La première *keyframe* pertinente dépend de la valeur de `animation-direction` :

| `animation-direction` | première *keyframe* |
| --- | --- |
| `normal` ou `alternate` | `0%` ou `from` |
| `reverse` ou `alternate-reverse` | `100%` ou `to` |

`both`

L'animation respectera les règles qui s'appliquent à `forwards` et `backwards`, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.


**Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par `animation-name`. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| 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-fill-mode =   
  <single-animation-fill-mode>#    
  
<single-animation-fill-mode> =   
  none       |  
  forwards   |  
  backwards  |  
  both         
  
```

Exemples
--------

### CSS


```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}
@-webkit-keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}
.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
}
```

### HTML


```html
<p>Déplacez votre souris sur la boîte grise.</p>
<div class="demo">
  <div class="growsandstays">La boîte grandit et s'arrête</div>
  <div class="grows">La boîte grandit</div>
</div>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

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

* Manipuler les animations CSS
* `AnimationEvent`