Heim >Web-Frontend >CSS-Tutorial >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:432831Durchsuche
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
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!