css3动画：1.transform;2.transition;3.animation; 下面分别详细讲解并解释三者的区别

1. transform (变换) 单纯的变化瞬间完成看不到变化过程

使用方法：直接在样式表中书写即可；

.test:hover
{
    -moz-transform:rotate(5deg); //Firefox
    -webkit-transform:rotate(5deg); //Safari and Chrome 
    -o-transform:rotate(5deg); // Opera
    -ms-transform:rotate(5deg); //IE
    transform:rotate(5deg);
}

none：无转换。

transform-origin：left buttom 以左下角为基准进行旋转　

默认值为 center center 如果只填一个值，则另一个值默认为center

matrix(1,1,1,1,1,1) 使用6哥值得矩阵。

translate(200px,300px) 水平移动200px，垂直移动300px

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX(20px)：X轴（水平方向）平移 20px

translateY(20px)：Y轴（垂直方向）平移 20px

rotate(20deg): 顺时针旋转20度

rotateX(180deg): 3D 围绕X轴旋转180度

rotateY(180deg): 3D 围绕Y轴旋转180度

scale(2,3)：水平放大2倍垂直放大3倍

指定对象的缩放，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，

则默认取第一个参数的值

scaleX(2) 水平放大2倍

scaleY(2) 垂直放大2倍

skew(30deg，40deg) 水平斜切扭曲30度垂直斜切扭曲40deg

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX(30deg)：X轴(水平方向)扭曲30度

skewY(40deg)：Y轴(垂直方向)扭曲40度

2. transition (过渡) 结合transform 看到其变化的过程

div
{
    width:100px;
    height:100px;
    background:yellow;

    transition:width 2s, height 2s;
    -webkit-transition:width 2s ease-in 3s, height 2s, -webkit-transform 2s 2s; /* Safari and Chrome */

}

div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
}

与transform结合使用，同时必须是原先已经定义的属性，才可进行变化。

如上例中的：width height transform:rotate(180deg)

transition:width 2s ease-in 3s

width ( transition-property ) : 检索或设置对象中的参与过渡的属性

all : 代表所有属性都进行变化

none : 不指定过渡的css属性

2s ( transition-duration ) : 检索或设置对象过渡的持续时间

ease-in ( transition-timing-function ): 检索或设置对象中过渡的动画类型

3s ( transition-delay ): 检索或设置对象延迟过渡的时间

transition-timing-function

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1,

x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

css3 动画详解

实现先执行什么动画，再执行什么动画的技巧是：使用延迟。即：transition-delay

参考链接：http://www.w3cplus.com/content/css3-transition

3. animation (动画) 结合 transform

div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;

    animation: myfirst 5s ease 5s 1 alternate paused forwards;

    color: white;
}

@keyframes myfirst {
    0% {left: 0px; top: 0px;transform: rotateY(0deg) }
    /*25% {left: 100px;  top: 0px }*/
    50% {left: 300px;  top: 0px;transform: rotateY(0deg)}
    /*75% {left: 400px;  top: 0px }*/
    100% {left: 300px;  top: 0px;transform: rotateY(720deg)}
}

animation: myfirst 5s ease 5s 1 alternate forwards;

myfirst [ animation-name ]：动画名称

5s [ animation-duration ]: 动画的持续时间

ease [ animation-timing-function ]: 动画的过渡类型

同transition的过渡类型

5s [ animation-delay ]: 动画延迟的时间

1 [ animation-iteration-count ]: 动画的循环次数

infinite 无限循环

alternate [ animation-direction ]: 动画在循环中是否反向运动

normal 默认值正向方向不反向

alternate 为正常与反向交替运动，

具体：第偶数次正向运动，第奇数次向反方向运动

forwards [ animation-fill-mode ]:元素在动画开始前后的状态是否根据动画设置中“0%”、“100%”的状态设置

取值可以为 none、forwards、backwards 或 both。

默认为 none ：动画过程中“0%”、“100%”的状态不会设置为元素开始和结束的状态

backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态。

backwaeds/none 使对象回到 0 0 状态

forwards/both 使对象保持在终态，不回撤

若加入 forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。

三者区别

1.transform 和 transition 需要经过用户触发才会表现出动态的效果。

2.这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是

click、focus 等 JavaScirpt 事件。

3.如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态

而没有动画过程。

4.animation 则无须触发条件，开发者只需为元素绑定动画即可。

5.在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过

程执行完毕后会回撤。

新版的animation添加了animation-fill-mode 属性(none/backwards/forwards/both) 弥补了

这个缺陷。

6.例如以 :hover 触发 transform ，在鼠标离开元素后动画自动反向播放，使到元素回到

transform 之前的状态。

7.animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前的动

态。

参考：http://kayosite.com/css3-animation.html

3D效果

参考 http://kayosite.com/more-about-css3-transformation.html

兼容性

参考 http://caniuse.com/