Bagaimana untuk menghentikan animasi dalam css3-tutorial css-php.cn

Bagaimana untuk menghentikan animasi dalam css3

青灯夜游

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

asal

11489 orang telah melayarinya

Dalam CSS3, atribut animation-play-state boleh digunakan untuk menghentikan animasi berjalan Fungsi atribut ini adalah untuk menentukan sama ada animasi sedang berjalan atau dijeda " kepada elemen yang digunakan untuk animasi. -state:pased;"

Bagaimana untuk menghentikan animasi dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS3, atribut animation-play-state boleh digunakan untuk menghentikan animasi yang sedang berjalan.

Contohnya: Terdapat animasi berputar sedemikian:

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

Salin selepas log masuk

Bagaimana untuk menghentikan animasi dalam css3

Jika anda ingin membuat elemen div berhenti berputar, anda boleh menetapkan animasi- mainkan untuk elemen div. -state atribut kepada

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

Salin selepas log masuk

Bagaimana untuk menghentikan animasi dalam css3

Penerangan:

atribut animation-play-state menentukan sama ada animasi sedang berjalan atau dijeda .

Sintaks:

animation-play-state: paused|running;

Salin selepas log masuk

dijeda: Menentukan bahawa animasi telah dijeda.
berjalan: Menentukan bahawa animasi sedang dimainkan.

Atribut ini boleh digunakan dengan JavaScript untuk menjeda animasi semasa main balik.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menghentikan animasi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!