Home > Article > Web Front-end > Detailed introduction to the animation-direction attribute in CSS3
Detailed introduction to the animation-direction attribute in CSS3
- 零下一度Original
- 2017-05-18 14:34:432771browse
CSS3 animation-direction property, CSS Reference Manual Example Execute the animation once, and then execute the animation in reverse. Retrieve or set whether the object animation moves in reverse direction in the loop
Example
Execute the animation once first, and then execute the animation in reverse:
!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>Browser support
Internet Explorer 10, Firefox and Opera support the animation-direction attribute.
Safari and Chrome support an alternative property, the -webkit-animation-direction property.
Note: Internet Explorer 9 and earlier versions do not support the animation-direction property.
Definition and Usage
The animation-direction property defines whether to loop and alternately play the animation in reverse.
Note: This property will have no effect if the animation is set to play only once.
CSS syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe
[Related recommendations]
1. Share an example of monitoring the css3 animation (animation) end event
2. The 8 properties of CSS3 animation (Animation) that must be mastered
3. Using the animation property to implement delayed execution between loops example tutorial
4. Detailed explanation of the two pause methods (transition, animation) in css3
The above is the detailed content of Detailed introduction to the animation-direction attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!