animation-fill-mode

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

La propriétéCSSanimation-fill-mode définit la façon dont une animation CSS applique des styles à sa cible avant et après son exécution.

Il est souvent pratique d'utiliser la propriété raccourcieanimation pour définir toutes les propriétés d'animation en une seule fois.

Exemple interactif

animation-fill-mode: none;animation-delay: 1s;

animation-fill-mode: forwards;animation-delay: 1s;

animation-fill-mode: backwards;animation-delay: 1s;

animation-fill-mode: both;animation-delay: 1s;

<section>  <div>Animation <span></span></div>  <div>Sélectionnez un mode pour démarrer&nbsp;!</div></section>

#example-element {  background-color: #1766aa;  color: white;  margin: auto;  margin-left: 0;  border: 5px solid #333333;  width: 150px;  height: 150px;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;}#play-status {  font-weight: bold;}.animating {  animation: slide 1s ease-in 1;}@keyframes slide {  from {    background-color: orange;    color: black;    margin-left: 0;  }  to {    background-color: orange;    color: black;    margin-left: 80%;  }}

const el = document.getElementById("example-element");const status = document.getElementById("play-status");function update() {  status.textContent = "décalée";  el.className = "";  window.requestAnimationFrame(() => {    window.requestAnimationFrame(() => {      el.className = "animating";    });  });}el.addEventListener("animationstart", () => {  status.textContent = "en cours";});el.addEventListener("animationend", () => {  status.textContent = "terminée";});const observer = new MutationObserver(() => {  update();});observer.observe(el, {  attributes: true,  attributeFilter: ["style"],});update();

Syntaxe

css

/* Animation seule */animation-fill-mode: none;animation-fill-mode: forwards;animation-fill-mode: backwards;animation-fill-mode: both;/* Animations multiples */animation-fill-mode: none, backwards;animation-fill-mode: both, forwards, none;/* Valeurs globales */animation-fill-mode: inherit;animation-fill-mode: initial;animation-fill-mode: revert;animation-fill-mode: revert-layer;animation-fill-mode: unset;

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 image clé (keyframe en anglais). La dernière étape considérée dépend de la valeur deanimation-direction et deanimation-iteration-count :

`animation-direction`	`animation-iteration-count`	dernière étape
`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`

Les propriétés animées se comportent comme si elles étaient incluses dans une valeur de propriétéwill-change. Si un nouveau contexte d'empilement a été créé pendant l'animation, l'élément cible conserve ce contexte d'empilement après la fin de l'animation.

backwards

L'animation appliquera les valeur définies par la première image clé (keyframe en anglais) pertinente et les retiendra pendant la durée indiquée paranimation-delay. La première étape pertinente dépend de la valeur deanimation-direction :

`animation-direction`	première étape
`normal` ou`alternate`	`0%` ou`from`
`reverse` ou`alternate-reverse`	`100%` ou`to`

both

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

Note :Lorsque vous indiquez plusieurs valeurs séparées par des virgules sur une propriétéanimation-*, elles sont appliquées aux animations dans l'ordre d'apparition desanimation-name. Si le nombre d'animations et de valeurs de propriétéanimation-* ne correspond pas, voirDéfinir plusieurs valeurs de propriétés d'animation.

Note :animation-fill-mode a le même effet lors de la création d'animations CSS pilotées par le défilement que pour les animations classiques basées sur le temps.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments, ainsi que lespseudo-éléments `::before` et`::after`
Héritée	non
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

animation-fill-mode =
<single-animation-fill-mode>#

<single-animation-fill-mode> =
none|
forwards|
backwards|
both

Exemples

Définir le mode de remplissage

Vous pouvez voir l'effet deanimation-fill-mode dans l'exemple suivant. Il montre comment faire en sorte que l'animation reste dans son état final plutôt que de revenir à l'état d'origine (qui est le comportement par défaut).

HTML

html

<p>Déplacez votre souris sur la boîte grise.</p><div>  <div>La boîte grandit et s'arrête</div>  <div>La boîte grandit</div></div>

CSS

css

.demo {  border-top: 100px solid #cccccc;  height: 300px;}@keyframes grow {  0% {    font-size: 0;  }  100% {    font-size: 40px;  }}.demo:hover .grows {  animation-name: grow;  animation-duration: 3s;}.demo:hover .grows-and-stays {  animation-name: grow;  animation-duration: 3s;  animation-fill-mode: forwards;}