Propriété animation-fill-mode

La propriété animation-fill-mode définit la position dans laquelle l'animation s'arrête après sa fin. Par défaut, l'animation revient à sa valeur initiale et cela peut ne pas être très esthétique.

Syntaxe

sélecteur {
	animation-fill-mode: backwards | forwards | both | none;
}

Valeurs

Valeur	Description
`none`	Si un délai d'animation est défini - pendant la durée du délai l'élément restera en place, puis sautera vers la frame `0%`. Après la fin de l'animation, l'élément ne restera pas dans l'état où il s'est arrêté, mais sautera vers l'état initial.
`backwards`	Force l'élément à se déplacer après le chargement de la page vers la frame `0%`, même si un délai `animation-delay` est défini, et à y rester jusqu'au début de l'animation. Après la fin de l'animation, l'élément ne restera pas dans l'état où il s'est arrêté, mais sautera vers l'état initial.
`forwards`	Indique au navigateur qu'après la fin de l'animation, l'élément restera dans l'état où il s'est arrêté.
`both`	Inclut backwards et forwards - après le chargement de la page, l'élément se positionnera sur la frame `0%`, et après la fin de l'animation, l'élément restera où il s'est arrêté.

Valeur par défaut : none.

Exemple . Valeur none

Dans cet exemple, margin-left est défini à la valeur 300px pour l'élément, et pour la première frame de l'animation - à 0px. Comme il n'y a pas de délai animation-delay, l'élément après le chargement de la page se positionnera à 0px, et non à 300px. De plus, l'animation après sa fin sautera vers la valeur initiale :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Valeur none

Dans cet exemple, margin-left est défini à la valeur 300px pour l'élément, et pour la première frame de l'animation - à 0px. Un délai animation-delay de 3 secondes est également défini pour l'élément, donc l'élément après le chargement de la page se positionnera à 300px, et non à 0px, et y restera pendant 3 secondes après le début de l'animation puis sautera vers 0px - et l'animation commencera de là. De plus, l'animation après sa fin sautera vers la valeur initiale :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Valeur backwards

Dans cet exemple, margin-left est défini à la valeur 300px pour l'élément, et pour la première frame de l'animation - à 0px. animation-fill-mode est également défini sur la valeur backwards, donc l'élément après le chargement de la page se positionnera à 0px, et non à 300px, comme c'était le cas pour animation-fill-mode sur la valeur none. De plus, l'animation après sa fin sautera vers la valeur initiale :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Valeur none et nombre de répétitions égal à 1

Dans cet exemple, margin-left est défini à la valeur 300px pour l'élément, et pour la première frame de l'animation - à 0px. Un délai animation-delay de 3 secondes est également défini pour l'élément, donc l'élément après le chargement de la page se positionnera à 300px, et non à 0px, et y restera pendant 3 secondes après le début de l'animation puis sautera vers 0px - et l'animation commencera de là. Comme animation-fill-mode est défini sur la valeur none, après la lecture de l'animation l'élément reviendra à la valeur initiale :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Valeur forwards et nombre de répétitions égal à 1

Dans cet exemple, animation-fill-mode est défini sur la valeur forwards, et le nombre de répétitions de l'animation - sur 1. Après la lecture de l'animation, l'élément restera dans la position où l'animation s'est terminée, et ne sautera pas vers le point de départ.

De plus, margin-left est défini à la valeur 300px pour l'élément, et pour la première frame de l'animation - à 0px. Un délai animation-delay de 3 secondes est également défini pour l'élément, donc l'élément après le chargement de la page se positionnera à 300px, et non à 0px, et y restera pendant 3 secondes après le début de l'animation, puis sautera vers 0px - et l'animation commencera de là :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple . Valeur both et nombre de répétitions égal à 1

Dans cet exemple, animation-fill-mode est défini sur la valeur both, et le nombre de répétitions de l'animation - sur 1. Après le chargement de la page, l'élément se positionnera sur la première frame de l'animation (à 0px, et non à 300px), et après la lecture de l'animation l'élément restera dans la position où l'animation s'est terminée, et ne sautera pas vers le point de départ :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voir aussi

la propriété animation-name,
qui définit le nom de l'animation
la propriété animation-duration,
qui définit la durée de l'animation
la propriété animation-delay,
qui définit le délai avant l'exécution de l'animation
la propriété animation-timing-function,
qui définit la vitesse d'exécution de l'animation
la propriété animation-iteration-count,
qui définit le nombre d'itérations de l'animation
la propriété animation-direction,
qui définit la direction de l'animation
la propriété animation-play-state,
qui permet de mettre l'animation en pause
la propriété animation,
qui est un raccourci pour les animations
la règle @keyframes,
qui définit les images clés de l'animation
les transitions douces transition, qui représentent une animation au survol de l'élément