英[dəˈrekʃən ] 美[dɪˈrɛkʃən, daɪ-]
n Richtung; Trend; Gebrauchsanweisung
CSS3-Animationsrichtungseigenschaft Syntax
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.
Wenn die Animation mehr als einmal abgespielt wird, können wir den Wert von „animation-direction“ auf „alternate“ setzen, um zu erreichen, dass die Animation umgekehrt abgespielt wird. Standardmäßig ist der Wert dieses Attributs normal, was bedeutet, dass die Animation normal abgespielt wird
CSS3-Animationsrichtungseigenschaft Beispiel
<!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