Maison > Article > interface Web > Comment définir et exécuter une animation CSS3 une fois

Comment définir et exécuter une animation CSS3 une fois

青灯夜游original: 2022-01-13 12:50:359975parcourir

En CSS3, vous pouvez utiliser l'attribut animation-iteration-count pour définir l'animation à exécuter une fois. La fonction de cet attribut est de définir le nombre de fois que l'animation est jouée lorsque la valeur de l'animation-iteration- ; L'attribut count est défini sur le nombre "1", vous pouvez définir l'animation pour qu'elle ne soit jouée qu'une seule fois.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, vous pouvez utiliser l'attribut animation-iteration-count pour définir l'animation à exécuter une seule fois.

L'attribut animation-iteration-count peut définir le nombre de fois que l'animation est lue et combien de fois l'animation doit être lue.

Syntaxe :

animation-iteration-count: value;

valeur	description
n	Un nombre qui définit combien de fois l'animation doit être jouée
infini	Spécifie que l'animation doit être jouée à l'infini fois (pour toujours)

Exemple :

Définissez l'animation pour qu'elle soit jouée une seule fois

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

				/* Safari and Chrome */
				-webkit-animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

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

				to {
					top: 200px;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				from {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

Comment définir et exécuter une animation CSS3 une fois

Modifiez-la et définissez l'animation pour qu'elle soit lue 3 fois

div {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
	animation: mymove 3s;
	animation-iteration-count: 3;

	/* Safari and Chrome */
	-webkit-animation: mymove 3s;
	-webkit-animation-iteration-count: 3;
}

Comment définir et exécuter une animation CSS3 une fois

(Partage de vidéos d'apprentissage : vidéo CSS tutoriel)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML+CSS+JS réalise des flocons de neige volant (partage de code)Article suivant：HTML+CSS+JS réalise des flocons de neige volant (partage de code)

Articles Liés

Voir plus