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"

转载于:https://www.cnblogs.com/xiaodonger/p/5115409.html