Comment définir et exécuter une animation CSS3 une fois-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2022-01-13 12:50:35

original

10021 Les gens l'ont consulté

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.

Comment définir et exécuter une animation CSS3 une 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;

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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