Use CSS3 animation properties to achieve 360 & #176; infinite loop rotation [code snippets], css3

Use CSS3 animation properties to achieve 360 ° infinite loop rotation [code snippets], css3

Use the animation attribute of CSS3 to achieve 360 ° infinite loop rotation.

Code snippet:

<Div id = "test">

// custom image path

</Div>

CSS style Writing is as follows:

# Change {position: absolute; right: 200px;-webkit-animation: change 2 s linear infinite ;}

@-Webkit-keyframes change

{

0% {-webkit-transform: rotate (0deg );}

50% {-webkit-transform: rotate (180deg );}

100% {-webkit-transform: rotate (360deg );}

}

 

Done !!! Of course, only the chrome/Safari browser compatibility is provided here, and the following can be added:

@-Moz-keyframes change {***} Firefox

 

@-Ms-keyframes change {***} IE

@ Keyframes change {***} W3C

Operabrowser does not support the animation attribute !!!