CSS-Animationsrichtungseigenschaft
Übersetzungsergebnisse：
英[dəˈrekʃən ] 美[dɪˈrɛkʃən, daɪ-]
n Richtung; Trend; GebrauchsanweisungCSS-AnimationsrichtungseigenschaftSyntax
Wie verwende ich das Animationsrichtungsattribut?
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 Animation in umgekehrter Reihenfolge realisieren, indem wir den Wert von „animation-direction“ auf „alternate“ setzen.
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.
CSS-AnimationsrichtungseigenschaftBeispiel
<!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>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen