Heim >Web-Frontend >CSS-Tutorial >So stoppen Sie die Animation in CSS3
So stoppen Sie die Animation in CSS3
- 青灯夜游Original
- 2022-01-20 16:14:0211502Durchsuche
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.
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>
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;
}
setzen Anleitung:
animation – Das Play-State-Attribut gibt an, ob die Animation läuft oder pausiert.
Syntax:
animation-play-state: paused|running;
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!