Définition et utilisation da la propriété css animation-fill-mode
La propriété animation-fill-mode est utilisée pour spécifier les valeurs qui sont appliquées par l'animation avant et après son exécution. Avant de jouer la première image-clé ou après avoir joué la dernière image-clé.Les animations CSS n'affectent pas l'élément animé avant la première image clé ou après la dernière image clé. La propriété animation-fill-mode peut modifier ce comportement.
La Syntaxe CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.animationFillMode="forwards" |
Prise en charge de la propriété css animation-fill-mode dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  | |
|---|---|---|---|---|---|---|
| Verssion | 43 4 -webkit- | 10 | 16 5 -moz- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>
CSS | La propriété animation-duration
</title>
<style>
div {
width: 100px;
height: 100px;
border: solid 1px;
position: relative;
animation: monAnimation 3s;
animation-delay:2s;
animation-fill-mode: forwards;
}
@keyframes monAnimation {
from {top: 0px;background-color:red;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: forwards</h1>
<p>Lorsque l'animation se termine, l'élément div conserve les valeurs de style de la dernière image clé :</p>
<div></div>
</body>
</html>
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>
CSS | La propriété animation-duration
</title>
<style>
div {
width: 100px;
height: 100px;
border: solid 1px;
position: relative;
animation: monAnimation 3s;
animation-fill-mode: backwards;
}
@keyframes monAnimation {
from {left: 0px;background-color:red;}
to {left: 300px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: forwards</h1>
<pre>Si on clique sur le bouton "MODIFIER" lorsque l'animation se termine,
l'élément div conserve les valeurs de style de la dernière image clé :</pre>
<button onclick="maFonction()"> MODIFIER </button>
<div id="monDIV"></div>
<script>
function maFonction() {
document.getElementById("monDIV").style.animationFillMode = "forwards";
}
</script>
</body>
</html>
Valeurs de la propriété animation-fill-mode
none : C'est la valeur par défaut. Les propriétés de l'animation ne s'appliqueront à aucun élément avant ou après son exécution.forwards (en avant) : L'élément conservera les mêmes propriétés d'animation de la dernière image-clé après la fin de l'animation.
backwards (vers l'arrière) : Cette valeur de propriété est utilisée pour définir l'élément à la première valeur d'image clé avant de commencer l'animation.
both : Cette propriété est utilisée pour suivre les règles à la fois pour l'avant et l'arrière.
initial : Cette propriété est utilisée pour définir la propriété à sa valeur par défaut.
inherit : Cette propriété est utilisée pour hériter cette propriété de son élément parent.