Rumah > Artikel > hujung hadapan web > Bagaimana untuk menghentikan animasi dalam css3
Bagaimana untuk menghentikan animasi dalam css3
- 青灯夜游asal
- 2022-01-20 16:14:0211446semak imbas
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;"
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>
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;
}
Penerangan:
atribut animation-play-state menentukan sama ada animasi sedang berjalan atau dijeda .
Sintaks:
animation-play-state: paused|running;
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!