CSS3 Series Tutorial--animation

Animation: Animation
Animationshi the animated effect of CSS. You need to define Keyframe animation objects to implement.
In order to be compatible with Apple/chrome,firefox,ie each definition needs to add-webkit-,-moz-and Keyframe
Note: In the Apple browser, if you encounter the-webkit-transform attribute is invalid, please fill in each overlapping attribute of each animation interval.
For example:/* part in Chrome and Firefox, ie no problem, in 360 and I have to use the above in Safari * *, it is recommended to write the whole.
@-webkit-keyframes rolate{
0%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1);}
8%{-webkit-transform:rotatex (360deg) Rotatey (0deg) skew (15deg) scale (1);}
9%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1);}
12%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
16%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1.2)}
20%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
50%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
50%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
58%{-webkit-transform:rotatex (0deg) Rotatey (360deg) skew (15deg) scale (1);}
59%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
62%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
66%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1.2)}
70%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
100%{-webkit-transform:rotatex (0deg) Rotatey (0deg) skew (0deg) scale (1)}
/*0%{-webkit-transform:rotatex (0deg) skew (0deg);}
8%{-webkit-transform:rotatex (360deg) skew (15deg);}
9%{-webkit-transform:rotatex (360deg) skew (0deg);}
12%{-webkit-transform:rotatex (360deg) scale (1)}
16%{-webkit-transform:rotatex (360DEG) scale (1.2)}
20%{-webkit-transform:rotatex (360deg) scale (1)}
50%{-webkit-transform:rotatex (360deg) skew (0deg);}
50%{-webkit-transform:rotatey (0deg) skew (0deg) scale (1)}
58%{-webkit-transform:rotatey (360deg) skew (15deg);}
59%{-webkit-transform:rotatey (360deg) skew (0deg)}
62%{-webkit-transform:rotatey (360deg) scale (1)}
66%{-webkit-transform:rotatey (360DEG) scale (1.2)}
70%{-webkit-transform:rotatey (360deg) scale (1)}
100%{-webkit-transform:rotatey (360deg) skew (0deg) scale (1)}*/
}

Here's how to learn animation:
1. @keyframe to define animation animations
2. Name of the Animation-name:keyframe
3.animation-duration: Time of animation execution
4.animation-timing-function: Animation Over-curve method
5.animation-delay: Animation delay time
6.animation-iteration-count: Number of plays

animation:rolate 36s ease-in-out 0s infinite
-webkit-animation:rolate 36s ease-in-out 0s infinite
-moz-animation:rolate 36s ease-in-out 0s infinite
JS notation:
document.getElementsByTagName ("div") [0].style.webkitanimation= "rolate 36s ease-in-out 0s infinite"

CSS3 Series Tutorial--animation