So stoppen Sie CSS3-Animationen-CSS-Tutorial-php.cn

So stoppen Sie CSS3-Animationen

醉折花枝作酒筹

Freigeben： 2023-01-05 16:08:05

Original

5484 Leute haben es durchsucht

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.).

So stoppen Sie CSS3-Animationen

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

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!