Heim > Artikel > Web-Frontend > Detaillierte Einführung in das Attribut „animation-direction“ in CSS3

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

零下一度Original: 2017-05-18 14:34:432771Durchsuche

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>

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：8 Eigenschaften der CSS3-Animation (Animation), die Sie beherrschen müssenNächster Artikel：8 Eigenschaften der CSS3-Animation (Animation), die Sie beherrschen müssen

In Verbindung stehende Artikel

Mehr sehen