Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Animationsrichtungseigenschaft
So verwenden Sie die CSS-Animationsrichtungseigenschaft
- 藏色散人Original
- 2019-05-29 09:15:143484Durchsuche
Die CSS-Eigenschaft „animation-direction“ wird verwendet, um zu definieren, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll. Wenn die Animation mehr als einmal abgespielt wird, können wir die Animation in umgekehrter Reihenfolge realisieren, indem wir den Wert von „animation-direction“ auf „alternate“ setzen .
Wie verwende ich die CSS-Animationsrichtungseigenschaft?
Das Attribut „animation-direction“ wird verwendet, um zu definieren, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll. Wenn die Animation mehr als einmal abgespielt wird, können wir die Animationsdrehung realisieren, indem wir den Wert der Animation festlegen -Richtung zum Abwechseln.
Funktion: Legen Sie fest, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Syntax:
animation-direction: normal|alternate;
Beschreibung: normal Standardwert. Die Animation sollte normal abgespielt werden. alternierend Die Animation sollte sich in umgekehrter Reihenfolge abwechseln.
Hinweis: Wenn die Animation so eingestellt ist, dass sie nur einmal abgespielt wird, hat dieses Attribut keine Auswirkung.
Beispiel für die Verwendung der CSS-Animationsrichtungseigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>
<div></div>
</body>
</html>Effektausgabe:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Animationsrichtungseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!