css3系列教程--animation

Animation:动画
animationshi css的动画效果。需要定义keyframe动画对象来实现。
为了兼容苹果/chrome，firefox,ie每次定义需要添加-webkit-,-moz-和keyframe
注：在苹果浏览器中，如果遇到-webkit-transform属性失效的时候，请把每个动画区间的每一个叠加的属性补全。
例如：/*部分在chrome和火狐，ie下均没有问题，在360和我safari下就得用上面所写*/，建议以后都写全。
@-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)}*/
}

再来学习一下animation的方法：
1。@keyframe定义animation的动画
2. animation-name:keyframe的名称
3.animation-duration:动画执行的时间
4.animation-timing-function:动画过度曲线方法
5.animation-delay:动画延时时间
6.animation-iteration-count:播放次数

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写法：
document.getElementsByTagName("div")[0].style.webkitAnimation="rolate 36s ease-in-out 0s infinite"