Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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é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
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>Select a mode to start!</div></section>#example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333; width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;}#playstatus { 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%; }}"use strict";window.addEventListener("load", () => { const el = document.getElementById("example-element"); const status = document.getElementById("playstatus"); function update() { status.textContent = "delaying"; el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = "animating"; }); }); } el.addEventListener("animationstart", () => { status.textContent = "playing"; }); el.addEventListener("animationend", () => { status.textContent = "finished"; }); const observer = new MutationObserver(() => { update(); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); update();});Syntaxe
/* 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
noneL'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.
forwardsLa 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-directionet deanimation-iteration-count:animation-directionanimation-iteration-countdernièrekeyframe normalpair ou impair 100%outoreversepair ou impair 0%oufromalternatepair 0%oufromalternateimpair 100%outoalternate-reversepair 100%outoalternate-reverseimpair 0%oufrombackwardsL'animation appliquera les valeur définies par la premièrekeyframe pertinente et les retiendra pendant la durée indiquée par
animation-delay. La premièrekeyframe pertinente dépend de la valeur deanimation-direction:animation-directionpremièrekeyframe normaloualternate0%oufromreverseoualternate-reverse100%outobothL'animation respectera les règles qui s'appliquent à
forwardsetbackwards, 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 paranimation-name. Pour plus d'informations, voir : paramétrerles valeurs des propriétés pour plusieurs animations.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments, ainsi que lespseudo-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
.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
<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>Résultat
Spécifications
| Specification |
|---|
| CSS Animations Level 1 # animation-fill-mode |