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é CSS animation-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é raccourcie animation 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 class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">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 de animation-direction et de animation-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 par animation-delay. La première étape pertinente dépend de la valeur de animation-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 et backwards, 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 des animation-name. Si le nombre d'animations et de valeurs de propriété animation-* ne correspond pas, voir Dé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 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

Définir le mode de remplissage

Vous pouvez voir l'effet de animation-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 class="demo">
  <div class="growsandstays">La boîte grandit et s'arrête</div>
  <div class="grows">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;
}

Résultat

Voir Animations CSS pour plus d'exemples.

Spécifications

Specification
CSS Animations Level 1 # animation-fill-mode

Compatibilité des navigateurs

Voir aussi

Manipuler les animations CSS
L'interface API AnimationEvent
Les autres propriétés d'animation associées : animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 29 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content