css3 动画详解

sdbxpjzq

2015-12-04

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 为正常与反向交替运动，

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