Css3旋转动画效果

Css3旋转动画效果

通过@keyframes规则能够创建动画，CSS3是可以通过代码来创建动画的。用@keyframes定义规则后，就不用像之前先在元素定义执行几秒，@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式，运动样式，再在hover上定义旋转度数，然后直接在规则中全部定义好，再在hover引用。

下面是@keyframes 规则和所有动画属性：

animation: name duration timing-function delay iteration-count direction;

animation:所有动画属性的简写属性，除了 animation-play-state 属性

animation-name:规定 @keyframes 动画的名称

animation-
duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0

animation-
timing-function:规定动画的速度曲线。默认是 “ease”

animation-
delay:规定动画何时开始。默认是 0

animation-
iteration-count:规定动画被播放的次数。默认是 1

animation-direction:规定动画是否在下一周期逆向地播放， 默认是 “normal” ，若是“alternate”代表完成动画一次需要返回去一次

下面就举个例子

@-webkit-keyframes x_rot {

0%   { -webkit-transform:rotateX(-30deg); }
50%   { -webkit-transform:rotateX(30deg); }   
100%  { -webkit-