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.
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
