Animation

英[fɪl ] 美[fɪl]

vt.& vi. (faire) plein, (faire) plein

vt pour préparer des médicaments (sur commande); (sentiments)

n. pour remplir la quantité de... ;plein; remplir; remblai

Troisième personne du singulier: remplit le pluriel: remplit le participe passé: rempli le participe passé: rempli

mode

英[məʊd] 美[moʊd]

n manière; mode, mode

pluriel: modes

propriété css3 animation-fill-mode syntaxe

Fonction : L'attribut animation-fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.

Syntaxe : animation-fill-mode : none | forward | forwards Une fois l'animation terminée, conservez la dernière valeur de propriété (définie dans la dernière image clé). applique en arrière la valeur de la propriété start (définie dans la première image clé) avant que l'animation ne soit affichée pendant une période de temps spécifiée par animation-delay. Les modes de remplissage avant et arrière sont appliqués.​

Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge l'attribut animation-fill-mode.

propriété css3 animation-fill-mode exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 3s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;

	/* Safari 和 Chrome */
	-webkit-animation:mymove 3s;
	-webkit-animation-iteration-count:2;
	-webkit-animation-fill-mode:forwards;
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>

<div></div>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne