Heim > Artikel > Web-Frontend > So stoppen Sie CSS3-Animationen

So stoppen Sie CSS3-Animationen

醉折花枝作酒筹Original: 2021-04-13 15:14:005432Durchsuche

In CSS können Sie das Attribut „animation-play-state“ verwenden, um die Pause der Animation zu steuern. Die Syntax „animation-play-state:paused“ ist in verschiedenen Browsern unterschiedlich und das entsprechende Präfix ist unterschiedlich hinzugefügt werden muss (z. B. „-ms-“, „-webkit-“ usw.).

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

Animation ist der Effekt der schrittweisen Änderung eines Elements von einem Stil zum anderen. Sie können so viele Stile ändern, wie Sie möchten, so oft Sie möchten. Bitte geben Sie den Zeitpunkt der Änderung als Prozentsatz an oder verwenden Sie die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.

CSS3-Animation bietet direkt einen Animations-Wiedergabestatusstil zur Steuerung der Animationspausenverarbeitung. Achten Sie beim Schreiben des Animationsstils besonders auf die Kompatibilität verschiedener Browser und fügen Sie das entsprechende Präfix hinzu.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s;
    animation-play-state:paused;
    /* Safari and Chrome */
    -webkit-animation:mymove 5s;
    -webkit-animation-play-state:paused;
}
@keyframes mymove
{
    from {
        left:0px;
    }
    to {
        left:200px;
    }
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {
        left:0px;
    }
    to {
        left:200px;
    }
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.</p>
<div></div>
</body>
</html>

Die Eigenschaft „animation-play-state“ gibt an, ob die Animation ausgeführt oder pausiert wird.

Hinweis: Verwenden Sie diese Eigenschaft in JavaScript, um eine Animation während eines Zyklus anzuhalten.

animation-play-state: paused|running;

paused: Geben Sie die angehaltene Animation an.
running: Geben Sie die laufende Animation an

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So ändern Sie den Stil der Bildlaufleiste mit CSSNächster Artikel：So ändern Sie den Stil der Bildlaufleiste mit CSS

In Verbindung stehende Artikel

Mehr sehen