Detailed introduction to the animation-direction attribute in CSS3-CSS Tutorial-php.cn

Detailed introduction to the animation-direction attribute in CSS3

零下一度

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

Original

2835 people have browsed it

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>

Copy after login

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

Copy after login

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