Maison > interface Web > tutoriel CSS > Comment arrêter l'animation en CSS3

Comment arrêter l'animation en CSS3

青灯夜游
Libérer: 2022-01-20 16:14:02
original
11489 Les gens l'ont consulté

En CSS3, l'attribut animation-play-state peut être utilisé pour arrêter l'animation en cours. La fonction de cet attribut est de spécifier si l'animation est en cours d'exécution ou en pause. Il vous suffit d'ajouter "animation-play-state:paused". " à l'élément auquel l'animation est appliquée. ;" le style suffit.

Comment arrêter l'animation en CSS3

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

En CSS3, l'attribut animation-play-state peut être utilisé pour arrêter l'animation en cours d'exécution.

Par exemple : Il existe une telle animation rotative :

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
				animation: mymove 1s linear infinite;
			}
			@keyframes mymove {
				100% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove {/* Safari and Chrome */
				100% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
Copier après la connexion

Comment arrêter lanimation en CSS3

Si vous souhaitez empêcher l'élément div de tourner, vous pouvez définir l'attribut animation-play-state de l'élément div sur

div {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 50px auto;
	animation: mymove 1s linear infinite;
	animation-play-state:paused;
}
Copier après la connexion

Comment arrêter lanimation en CSS3

Instructions :

animation- L'attribut play-state précise si l'animation est en cours d'exécution ou en pause.

Syntaxe :

animation-play-state: paused|running;
Copier après la connexion
  • paused : Spécifie que l'animation a été mise en pause.

  • running : Spécifie que l'animation est en cours de lecture.

Cet attribut peut être utilisé avec JavaScript pour mettre l'animation en pause pendant la lecture.

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal