css3之动画效果

css3里面提供了很多动态效果的属性，有些超级炫酷，所以在不用flash之类的软件的情况下，也可以快速做出想要的动画效果。

今天先说说3D动画效果的一些属性，通过css3我们可以对元素进行移动，缩放，转动，拉长或延伸；

好了.......transform属性闪亮登场啦......

先介绍css3中transform提供了四个常用的方法：

1：translate（）；【根据给定的left，top位置参数，将元素从其当前的位置移动，参数单位：px，参数个数：1】

例如：div{

transform:translateX/translateY/translateZ（50px）;

-ms-transform:translateX/translateY/translateZ (50px);

-webkit-transform:translateX/translateY/translateZ (50px);

-moz-transform:translateX /translateY/translateZ(50px);

}

将元素x/y/z轴向左移动50px；

其中ms前缀是为了兼容IE，webkit兼容chrome和Safari，moz兼容firefix；

2：rotate（）；【将元素顺时针旋转给定的角度，当参数为负值时，元素将逆时针旋转，参数单位：deg，参数个数：1】

例如：div{

transform:rotateX/rotateY/rotateZ（180deg）;

-ms-transform:rotateX/rotateY/rotateZ(180deg);

-webkit-transform:rotateX/rotateY/rotateZ (180deg);

-moz-transform:rotateX/rotateY/rotateZ (180deg);

}

将元素在x/y/z轴顺时针旋转180度；

3：scale（）；【元素的尺寸会增加或减少，参数个数：1；参数单位：无】

例如：div{

transform:scaleX/scaleY/scaleZ（2）;

-ms-transform:scaleX/scaleY/scaleZ(2);

-webkit-transform:scaleX/scaleY/scaleZ（2);

-moz-transform:scaleX/scaleY/scaleZ(2);

}

将元素在x/y/z轴变为原来的2倍；

4：skew（）；【元素翻转给定的角度，参数个数：1,参数单位：deg】

例如：

div{

transform:skewX/skewY（180deg）;

-ms-transform:skewX/skewY(180deg);

-webkit-transform:skewX/skewY(180deg);

-moz-transform:skewX/skewY(180deg);

}

接下来该@keyframes和animation登场了.....

用@keyframes的规则创建动画，创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果；

用animation规定动画的一些属性（名称，时长，次数等）；

例如：

div{

animation：myaction  2s；   //规定动画的名称为myaction，动画的时长为2s ，这两个属性必须规定

}

@keyframes myaction{

0% {background：red；}

100%{background：green；}

}

以上动画名称为：myaction；动画时长：2s；动画效果为：在两秒内背景色从红色变为绿色；

接下来举一个将图片做成旋转效果的动画的例子：