Comment utiliser la propriété animation-fill-mode-tutoriel CSS-php.cn

Comment utiliser la propriété animation-fill-mode

青灯夜游

Libérer： 2019-02-01 11:27:31

original

3918 Les gens l'ont consulté

L'attribut animation-fill-mode est utilisé pour appliquer le style à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation est terminée ou lorsque l'animation a un délai avant de commencer à jouer), c'est-à-dire si son l'effet d'animation est visible.

Comment utiliser la propriété animation-fill-mode

Propriété CSS3 animation-fill-mode

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

Remarque : Par défaut, les animations CSS n'affectent pas l'élément jusqu'à ce que la première image clé soit jouée, et cessent d'affecter l'élément une fois la dernière image clé terminée. La propriété animation-fill-mode remplace ce comportement.

Syntaxe :

animation-fill-mode : none | forwards | backwards | both;

Copier après la connexion

aucun : Ne modifiez pas le comportement par défaut.

forwards : Lorsque l'animation est terminée, conservez la dernière valeur d'attribut (définie dans la dernière image clé).

backwards : applique 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 deux : les modes de remplissage avant et arrière sont appliqués.

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

Exemple d'utilisation de l'attribut CSS3 animation-fill-mode

<!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>

<div></div>

</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser la propriété animation-fill-mode

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!