Detaillierte Einführung in das Attribut „animation-direction' in CSS3-CSS-Tutorial-php.cn

Detaillierte Einführung in das Attribut „animation-direction' in CSS3

零下一度

Freigeben： 2017-05-18 14:34:43

Original

2855 Leute haben es durchsucht

CSS3-Animationsrichtungseigenschaft, Beispiel für ein CSS-Referenzhandbuch Führen Sie die Animation einmal aus und führen Sie sie dann in umgekehrter Reihenfolge aus. Rufen Sie ab oder legen Sie fest, ob sich die Objektanimation in der Schleife in umgekehrter Richtung bewegt

Instanz

Führen Sie die Animation zuerst einmal aus und führen Sie sie dann in umgekehrter Richtung aus:

!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; 

/* Safari 和 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 和 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> <p></p> </body> </html>

Nach dem Login kopieren

Browserunterstützung

Internet Explorer 10, Firefox und Opera unterstützen das Animationsrichtungsattribut.

Safari und Chrome unterstützen eine alternative Eigenschaft, die Eigenschaft -webkit-animation-direction.

Hinweis: Internet Explorer 9 und frühere Versionen unterstützen die Eigenschaft „animation-direction“ nicht.

Definition und Verwendung

Das Attribut „animation-direction“ definiert, ob Animationen in umgekehrter Reihenfolge wiederholt und abwechselnd ausgeführt werden sollen.

Hinweis: Diese Eigenschaft hat keine Auswirkung, wenn die Animation so eingestellt ist, dass sie nur einmal abgespielt wird.

CSS-Syntax

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe

Nach dem Login kopieren

[Verwandte Empfehlungen]

1. Teilen Sie ein Beispiel für die Überwachung des CSS3-Animationsendereignisses

2. Die 8 Eigenschaften der CSS3-Animation (Animation), die Sie beherrschen müssen

3. Verwenden Sie das Animationsattribut, um Beispiele für die verzögerte Ausführung zwischen Schleifen zu implementieren

4. Detaillierte Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Attribut „animation-direction' in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!