css3动画模块transform transition animation属性解释

首先来看下对各大浏览器的兼容性

	IE	Firefox	Safari	Chrome	Opera
CSS 2D Transform	no	3.5	3.2	2.0	10.5
CSS 3D Transform	no	no	4.* (Mac)	no	no
Transition	no	3.7	3.2	2.0	10.5
Animation	no	no	4.0	2.0	no

transform

这个比较简单，控制元素进行平面上的二维变换，有三个属性：

1. 旋转 rotate()。对元素按顺时针或逆时针方向进行旋转，其值为正数时，表示按顺时针方向旋转，其值为负数时，表示按逆时针方向旋转。单位为度数（deg）。例如:

   ps:旋转属性可以实现那种常见的三角的tips效果。把一个正方形旋转45度就变成◆了，自己试试吧

2. 偏斜 skew(x,y)。有两个参数，第一个表示按x轴方向倾斜的度数，第二个是y轴的度数。主要的区别是，x轴的值若为正数，表示逆时针偏斜，若为负数，表示顺时针偏斜；而y轴的值跟x轴的刚好相反，正为顺，负为逆。

3. 平移 translate(x,y)。平移是一种利用x和y坐标值（单位为px）定位元素的方式，注意这个跟position的定位不一样，它参照的位置是它本身，但position参照的是父级。

transform:rotate(45deg); /*顺时针旋转45度*/
transform:rotate(-45deg); /*逆时针旋转45度*/

transform:skew(30deg,10deg); /*在x轴方向逆时针偏斜30度，在y轴方向顺时针偏斜10度*/

transform:translate(10px,15px); /*向左移动10px，向下移动15px*/


/*多个transform类型的设置可以写一起的，之间用空格分隔，例如上面的可以这样写：*/
transform:rotate(45deg) skew(30deg,10deg) translate(10px,15px)

 transition

官方的解释是“允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或者对元素的任何改变中触发，并以圆滑的动画效果改变CSS的属性值”。比如原来的背景是#fff，hover时是#000，如果用了transition，就是从#fff平滑过渡成#000（发挥自己的想象力想一下吧）。

transition可以分解成4个属性：

1. transtion-property 用于指定哪些属性值改变时显示transition动画效果。none表示没有，all表示所有，或者用逗号分隔需要指定的属性，如transition-property: background,width,height.

2. transition-duration 表示动画持续时间，可以设置多个值，中间用逗号分隔，其中每个值对应transition-perproty设置的每个属性。例如：

 

transition-perproty: width,height;
transition-duration:1s,0.5s
/*表示宽度的转换动画持续的时间为1s，高度转换动画持续的时间为0.5s*/

 

3. transition-timing-function 表示转换动画的效果，有多个值可以选择：

　　1）Linear 指定一个线性渐变

　　2）ease 指定一个逐渐慢下来的动画

　　3）ease-in 指定一个先慢后快的渐变动画

　　4）ease-out 指定一个先快后慢的渐变动画

　　5）ease-in-out 指定一个先慢后快再慢的渐变动画

　　6）cubic-bezier 使用贝塞尔曲线来指定一个复杂的动画渐变效果（这个效果很不错，可以做比较复杂的效果，附带一个制作效果的网站：http://matthewlein.com/ceaser/）

4. transtion-delay 指定在动画开始前等待的时间，不需要时可以省略。

animation

animation比transition更接近动画的含义，可以为animation设置多帧的效果，然后把这些帧组合、变换，按动画效果显示出来。共有6个属性，在了解它的属性之前，首先有必要先熟悉一下关键帧keyframes这个属性。

keyframes 从字面上看，keyframes表示关键帧的意思。在flash里面也存在这个概念，我们可以想想一张gif动画由一帧一帧的图像组成。在CSS3里，我们用keyframes描述第一帧的效果，用animation描述每一帧如何组合在一起以及表现的效果。格式如下：

 

@keyframes 动画标识名{  /*动画标识名将被animation-name属性所引用*/
   /*每一帧的动画效果，可以通过百分比数值加样式的形式来定义*/
    0%{
           background-color: white;
    }
    50%{
           background-color: red;
    }       
   100%{
           background-color: black;  
    }
}

/*我们可以把百分比数值看做第一帧在动画中时间轴的位置，0%在时间轴的开始，50%在时间轴的正中，100%在时间轴的终点。那以上的动画效果就是，元素的背景颜色会从白色渐变成红色，再从红色渐变成黑色。0%和100%也可以分别用form和to来代替*/

@keyframes 动画标识名{
    from{
           background-color: white;
    }
    50%{
           background-color: red;
    }       
    to{
           background-color: black;  
    }
}

 属性：

1. animation-name 此属性指定动画应对的keyframes，比如设置animation-name为loading，那么动画就对应@keyframes loading所声明的关键帧。如果没有定义关键帧，动画将不会生效。

2. animation-duration 定义一次动画的持续时间，默认值为0

3. animation-delay 定义从触发到开始动画的时间

4. animation-timing-function 定义动画显示的效果，例如先快后慢，先慢后快等，属性值与transition-timing-function相同

5. animation-iteration-count 该属性定义动画循环的次数，默认为1。我们可以用infinite来使动画无限次循环，这是transition动画所无法支持的。

6. animation-direction 定义动画播放的方向，默认值为normal，代表每次动画都向前播放。另外一个值是alternate，第偶数次动画向前播放，第奇数次逆向播放。

 

要注意在写以上的属性时，都要根据不同的浏览器加上前缀，-webkit-,-o-,-ms-,-moz-

附带相关链接：

http://www.w3cplus.com/content/css3-transform(transform)

http://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html(transition)

http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html(animation)