So verwenden Sie die CSS-Animationsrichtungseigenschaft-Front-End-Fragen und Antworten-php.cn

So verwenden Sie die CSS-Animationsrichtungseigenschaft

藏色散人

Freigeben： 2019-05-29 09:15:14

Original

3580 Leute haben es durchsucht

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 .

So verwenden Sie die CSS-Animationsrichtungseigenschaft

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Effektausgabe:

So verwenden Sie die CSS-Animationsrichtungseigenschaft

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!