css动画入门总结

前言：

我感觉其实css动画工作中用的不是很多（可能看工作类型吧），但是感觉还是非常强大的，又非常有意思，所以在空闲之余总结一下css动画的一些属性及设置方法，并通过实例加强学习。

一、animation

animation共有8个属性，分别是：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

以上属性可以通过animation简写设置，语法：

animation:name duration timing-function delay iteration-count direction fill-mode play-state;

下面将详细介绍下这几个属性，并举🌰验证：

1. animation-name

animation-name 属性为 @keyframes 动画规定的名称，用于绑定动画及dom，如：

@keyframes move {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(300px,0);
    }
}

animation-name:move;

补充@keyframes 写法：

/*第一种*/
@keyframes 属性名 {
    from{
        transform:translate(0px,0px);
    }
    to{
        transform:translate(300px,0);
    }
}

/*第二种*/
@keyframes move {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(300px,0);
    }
}

2. animation-duration

animation-duration规定完成一次动画所花费的时间，默认值是 0，即没有动画效果，单位是秒(s)或者毫秒(ms），如：

animation-duration:3s;

3. animation-timing-function

animation-timing-function 规定动画的速度曲线，属性值有下边几种：

3.1 linear：动画从头到尾的速度是相同的

animation-timing-function:linear;

效果如下： 

3.2 ease：默认，动画以低速开始，然后加快，在结束前变慢

animation-timing-function:ease;

3.3 ease-in：动画以低速开始

animation-timing-function:ease-in;

3.4 ease-out：动画以低速结束

animation-timing-function:ease-out;

3.5 ease-in-out：动画以低速开始和结束

animation-timing-function:ease-in-out;

3.6 cubic-bezier(x1,y1,x2,y2)：在 cubic-bezier 函数中自己的值，可能的值是从 0 到 1 的数值

cube-bezier(x1,y1,x2,y2) 函数定义三次贝塞尔曲线，改速度曲线分别由P0（0,0)，P1(x1,y1)，P2(x2,y2)，P3(1,1)四个坐标决定，如下：

transition-timing-function:cubic-bezier(0.1, 0.7, 0.6, 0.1);

 

3.7 steps(arg1,arg2) 

arg1: 一个数字，把动画的状态从0%到100%分割成多少步，显示效果就不是很平滑了，而是一顿一顿的

arg2：值可以为start或end,默认为end

4. animation-delay

animation-delay 属性定义动画距离开始的延迟时间，以秒或毫秒为单位，默认是0。

animation-delay:2s;

5、animation-iteration-count

animation-iteration-count 属性定义动画的播放次数，默认是1，infinite为无限次播放：

animation-iteration-count:3;

6、animation-direction

animation-direction 属性定义是否应该轮流反向播放动画，属性值有：

• normal：默认值，动画应该正常播放，就是重复播放

• alternate：动画轮流反向播放，就是来回放

7、animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见，有四个属性值：

• none：不改变默认行为，比如设置该属性后，上边小球动画结束后，最后会回到最左侧（最初的位置）
• forwards：当动画完成后，保持最后一个属性值，比如设置该属性后，上边小球动画结束后，最后会停留在右侧（结束时位置）
• backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
• both：向前和向后填充模式都被应用，即forwards和backwards都设置

8、animation-play-state

animation-play-state 属性规定动画正在运行还是暂停，可用来控制动画是否开始，属性值有：

• paused：规定动画已暂停
• running：规定动画正在播放

二、transition

transition 属性用来设置元素的过渡效果，共有四个属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

以上属性可通过transition简写，如下：

transition:property duration timing-function delay;

1. transition-property

指定CSS属性的name，transition效果，例如：

transition-property:width;

2. transition-duration

指定transition效果需要多少秒或毫秒才能完成，例如：

transition-duration:5s;

3. transition-timing-function

指定transition效果的转速曲线，属性值与animation-timing-function一样，例如：

transition-timing-function:linear;

4. transition-delay

定义transition效果开始前的延迟时间，例如2s后开始：

transition-delay:2s;

三、transform 

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等，属性值如下：

属性值	作用	属性值	作用
none	定义不进行转换。	scaleX(x)	通过设置 X 轴的值来定义缩放转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
translate(x,y)	定义 2D 转换。	rotate(angle)	定义 2D 旋转，在参数中规定角度。
translate3d(x,y,z)	定义 3D 转换。	rotate3d(x,y,z,angle)	定义 3D 旋转。
translateX(x)	定义转换，只是用 X 轴的值。	rotateX(angle)	定义沿着 X 轴的 3D 旋转。
translateY(y)	定义转换，只是用 Y 轴的值。	rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
scale(x[,y]?)	定义 2D 缩放转换。	skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
scale3d(x,y,z)	定义 3D 缩放转换。	skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。	skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。