So stoppen Sie die Animation in CSS3-CSS-Tutorial-php.cn

So stoppen Sie die Animation in CSS3

青灯夜游

Freigeben： 2022-01-20 16:14:02

Original

11536 Leute haben es durchsucht

In CSS3 kann das Attribut „animation-play-state“ verwendet werden, um die laufende Animation zu stoppen. Die Funktion dieses Attributs besteht darin, anzugeben, ob die Animation ausgeführt wird oder angehalten wird. Sie müssen nur „animation-play-state:paused“ hinzufügen " auf das Element, auf das die Animation angewendet wird. ;" Stil ist ausreichend.

So stoppen Sie die Animation in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 kann das Attribut „animation-play-state“ verwendet werden, um die laufende Animationsanimation zu stoppen.

Zum Beispiel: Es gibt so eine rotierende Animation:

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

Nach dem Login kopieren

So stoppen Sie die Animation in CSS3

Wenn Sie die Drehung des div-Elements stoppen möchten, können Sie das Attribut „animation-play-state“ des div-Elements auf

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

Nach dem Login kopieren

So stoppen Sie die Animation in CSS3

setzen Anleitung:

animation – Das Play-State-Attribut gibt an, ob die Animation läuft oder pausiert.

Syntax:

animation-play-state: paused|running;

Nach dem Login kopieren

paused: Gibt an, dass die Animation angehalten wurde.
running: Gibt an, dass die Animation abgespielt wird.

Dieses Attribut kann mit JavaScript verwendet werden, um die Animation während der Wiedergabe anzuhalten.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stoppen Sie die Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!