css3 动画详解

  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]区域内，否则无效。

实现先执行什么动画，再执行什么动画的技巧是：使用延迟。即：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/