首先要是认识到,keyframes,这个属性能够让我们创建一个动画过度的效果。
例子:
@-webkit-keyframes test{
0%{ -webkit-transform: rotate(0deg);}
25%{ -webkit-transform: rotate(8deg);}
50%{ -webkit-transform: rotate(10deg);}
75%{ -webkit-transform: rotate(4deg);}
100%{ -webkit-transform: rotate(0deg);}
}
rotate是定义2D转换的角度。
接下来使用DIV使用animation来使用我们定义好的keyframes动画
例子:
div{-webkit-animation:test 0.5s linear infinite;}