Animation

英[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