oujood.com

Spécifier les valeurs à appliquer par l'animation avant et après son exécution

Dans ce chapitre nous allons voir comment fonctionne la propriété css animation-fill-mode et comment l'utiliser avec des exemples.
La propriété animation-fill-mode spécifie un style pour l'élément lorsque l'animation n'est pas jouée (avant qu'elle ne commence, après qu'elle se termine, ou les deux)..

chercher |

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éfautnone
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web