第六章-动画

本章目标

  • transform动画（重点）
  • animation动画（重点、难点）

一、transform动画

1.1什么是动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

  • transform：设置动画函数
    • translate：平移动画，基于X、Y坐标重新定位元素的位置
    • scale：缩放动画，可以使任意元素对象尺寸发生变化
    • rotate：旋转动画，将元素旋转一定度数（单位deg）,1个deg等于1度°
    • skew：倾斜动画，将元素进行斜切倾斜（单位deg）,1个deg等于1度°
  • transition：设置动画过渡属性
    • transition-property：设置过渡属性
      • all：全部属性过渡
    • transition-duration：设置过渡时间
      • 0.5s：默认值，单位秒
      • 500ms：单位毫秒，1秒等于1000毫秒
    • transition-timing-function：动画运动曲线
      • linear：线性运动，平缓运动
      • ease：默认值，开始缓慢，中间加速，结束缓慢
      • ease-in：开始缓慢，中间和结束加速
      • ease-out：结束缓慢，开始加速
      • ease-in-out：开始和结束缓慢，中间加速
    • transition-delay：动画延迟
      • 0.5s：默认值，单位秒
      • 500ms：单位毫秒，1秒等于1000毫秒
  • transition简写方式
    • transition：过渡属性 过渡时间 运动曲线 动画延迟；

演示案例：平移动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平移动画</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            text-align: center;
            border: solid 1px red;
        }

        div:nth-child(1):hover{
            background-color: aqua;
            /* x轴平移 */
            transform: translateX(50px);
        }
        div:nth-child(2):hover{
            background-color: aqua;
            /* y轴平移 */
            transform: translateY(50px);
        }

        div:nth-child(3):hover{
            background-color: aqua;
            /* Z轴平移:二维平面中看不出效果 */
            transform: translateZ(30px);
        }

        div:nth-child(4):hover{
            background-color: aqua;
           
            transform: translate(50px,30px);
        }

    </style>
</head>
<body>
    <div>x轴平移</div>
    <div>y轴平移</div>
    <div>Z轴平移</div>
    <div>综合平移</div>
</body>
</html>

演示案例：缩放动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放动画</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            line-height: 100px;
            background-color: aqua;
            margin: 10px;
            text-align: center;
            display: inline-block;
        }
        div:nth-child(1):hover{
            /* x轴放大为2倍 */
            transform:scaleX(2);
        }

        div:nth-child(2):hover{
            /* x轴缩小为1/2 */
            transform:scaleX(0.5);
        }

        div:nth-child(3):hover{
            /* Y轴放大为2倍 */
            transform:scaleY(2);
        }

        div:nth-child(4):hover{
            /* Y轴缩小为1/2 */
            transform:scaleY(0.5);
        }

        div:nth-child(5):hover{
            /* 放大为2倍 */
            transform:scale(2);
        }

        div:nth-child(6):hover{
            /* 缩小为1/2 */
            transform:scale(0.5);
        }
    </style>
</head>
<body>
    <div>放大2倍-x</div>
    <div>缩小为1/2-x</div>

    <div>放大2倍-y</div>
    <div>缩小为1/2-y</div>

    <div>放大2倍-综合</div>
    <div>缩小为1/2-综合</div>

</body>
</html>

演示案例：旋转动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转动画</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            line-height: 100px;
            background-color: aqua;
            margin: 10px;
            text-align: center;
            display: inline-block;
        }

        div:nth-child(1):hover {

            /* 绕x轴旋转 */
            transform: rotateX(30deg);
        }

        div:nth-child(2):hover {

            /* 绕y轴旋转 */
            transform: rotateY(30deg);
        }

        div:nth-child(3):hover {

            /* 常规旋转：以中心点为旋转点 */
            transform: rotate(30deg);
        }

        div:nth-child(4):hover {

            /* 常规旋转：以左上角为旋转点 */
            transform-origin: 0px 0px;
            transform: rotate(30deg);
        }
    </style>

</head>

<body>
    <div>绕x轴旋转</div>
    <div>绕y轴旋转</div>
    <div>常规旋转-1</div>
    <div>常规旋转-2</div>
</body>

</html>

演示案例：倾斜动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜动画</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            text-align: center;
            border: solid 1px red;
            display: inline-block;
            background-color: aqua;
        }

        div:nth-child(1):hover {

            /* x轴倾斜 */
            transform: skewX(30deg);
        }

        div:nth-child(2):hover {

            /* x轴倾斜 */
            transform: skewX(-30deg);
        }

        div:nth-child(3):hover {

            /* Y轴倾斜 */
            transform: skewY(30deg);
        }

        div:nth-child(4):hover {

            /* Y轴倾斜 */
            transform: skewY(-30deg);
        }

        div:nth-child(5):hover {

            transform:skew(30deg,40deg);
        }
    </style>
</head>

<body>
    <div>X轴倾斜-1</div>
    <div>X轴倾斜-2</div>

    <div>Y轴倾斜-1</div>
    <div>Y轴倾斜-2</div>

    <div>综合倾斜</div>
</body>

</html>

演示案例:综合：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            /* 设置动画过渡属性 */
            transition: all 0.5s ease 0s;
        }

        .dv1 {
            background-color: pink;
        }

        .dv1:hover {
            /*位移动画*/
            transform: translate(50px, 50px);
        }

        .dv2 {
            background-color: orange;
        }

        .dv2:hover {
            /* 缩放动画 */
            transform: scale(1.5);

        }

        .dv3 {
            background-color: skyblue;
        }

        .dv3:hover {
            /*旋转动画*/
            transform: rotate(180deg);

        }

        .dv4 {
            background-color: tomato;
        }

        .dv4:hover {
            /*倾斜动画*/
            transform: skew(30deg, 30deg);
        }
    </style>
</head>

<body>
    <div class="dv1"></div>
    <div class="dv2"></div>
    <div class="dv3"></div>
    <div class="dv4"></div>
</body>

</html>

演示案例：动画过度属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画属性过度</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 150px;
            margin: 10px;
            display: inline-block;
        }

        div:nth-child(1):hover{

            /* 动画过度-指定属性 */
            transition-property: width;

            /* 过度时间 */
            transition-duration: 5s;

            /* 过度速度曲线 */
            transition-timing-function: ease-in;

            /* 目标值 */
            width: 400px;


        }

        div:nth-child(2):hover{

            /* 动画过度-指定属性 */
            transition-property: background-color;

            /* 过度时间 */
            transition-duration: 4s;

            /* 过度延迟 */
            transition-delay: 2s;

            /* 过度速度曲线 */
            transition-timing-function: ease-in;

            /* 目标值 */
            background-color:green;


        }


    </style>
</head>
<body>
    <div>改变宽度</div>
    <div>改变背景颜色</div>
</body>
</html>

二、animation动画

2.1什么是animation动画？

  1. 动画使元素逐渐从一种样式变为另一种样式。
  2. 您可以随意更改任意数量的 CSS 属性。
  3. 如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
  4. 关键帧包含元素在特定时间所拥有的样式。

2.2animation动画属性

  • @keyframes 关键帧
  • animation：设置盒子动画
    • animation-name：调用动画（必须的）
    • animation-duration：动画过渡时间（必须的）
    • animation-iteration-count：动画重复次数
      • number：2
      • infinite：不停重复循环播放动画
    • animation-timing-function：动画运动曲线
      • linear：线性运动，平缓运动
      • ease：默认值，开始缓慢，中间加速，结束缓慢
      • ease-in：开始缓慢，中间和结束加速
      • ease-out：结束缓慢，开始加速
      • ease-in-out：开始和结束缓慢，中间加速
  • animation-direction：动画运动方向
    • normal：正常的，正向运动
    • reverse：反向运动
    • alternate：奇数往正方向运行动画，偶数往反向运行动画
    • alternate-reverse：奇数往反方向运行动画，偶数往正向运行动画
  • animation-delay：动画延迟
    • 0.5s：默认值，单位秒
    • 500ms：单位毫秒，1秒等于1000毫秒
  • animation-play-state：动画播放状态
    • paused：暂停
    • running：运行
  • animation-fill-mode: 动画停留位置
    • backwards：动画播放完停留在开始状态；
    • forwards：动画播放完停留在结束状态；
  • animation简写方式
    • animation: 动画名称 过渡时间 运动曲线 动画延迟 重复次数 运动方向 停留位置;

2.3@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。

代码演示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画 关键帧 */
        @keyframes move {
            /* 开始状态 from等于0% */
            from{
                transform: translateX(0);
            }
            /* 结束状态 to等于100%*/
            to{
                transform: translateX(1000px);
            }
        }
        .dv{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            animation-name: move;
            /* 过渡时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            /* animation-timing-function: ease-in-out; */
            /* 动画重复的次数  iteration(重复的) count(次数) infinite(无限的)*/
            animation-iteration-count: 1;
            /* 动画运动方向 */
            /* animation-direction: alternate-reverse; */
            
            /* 动画延迟 */
            /* animation-delay: 1s; */
            /* 动画播放状态 */
            /* animation-play-state: paused; */
            animation-fill-mode:forwards;
        }
        /* .dv:hover{
            animation-play-state: running;
        } */
    </style>
</head>
<body>
    <div class="dv"></div>
</body>
</html>

演示案例：animation动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation动画</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            margin: 20px;
            text-align: center;
            line-height: 200px;
        }

        /* 自定义关键帧动画函数 */
        @keyframes Change1 {

            /* 开始状态 */
            from {
                background-color: red;
            }

            /* 终止状态 */
            to {
                background-color: green;
            }
        }

        div:nth-child(1):hover {
            /* 指定关键帧函数 */
            animation-name: Change1;

            /* 动画时间 */
            animation-duration: 5s;
        }

        /* 自定义关键帧动画函数 */
        @keyframes Change2 {
            from {
                transform: translateX(0px);
            }

            to {
                transform: translateX(1100px);
            }
        }

        div:nth-child(2) {
            /* 指定关键帧函数 */
            animation-name: Change2;

            /* 动画时间 */
            animation-duration: 5s;

            /* 动画重复次数 */
            animation-iteration-count: 3;

            /* 动画延迟 */
            /* animation-delay: 1s; */

            /* 动画运动方向: 奇数往正，偶数往反 */
            animation-direction: alternate;

            /* 动画执行完毕后，停留在开始或结束位置 */
            animation-fill-mode: forwards;

        }

        /* 鼠标悬浮时暂停 */
        div:nth-child(2):hover{
            animation-play-state: paused;
        }

    </style>
</head>

<body>
    <div>
        改变背景颜色
    </div>

    <div>
        改变位置
    </div>
</body>

</html>

课后作业

练习1：制作照片墙

练习2：旋转按钮

练习3：制作多彩照片墙

练习4：QQ彩贝热销时装

练习5：QQ彩贝导航

练习6：QQ彩贝高级搜索

练习7：制作百度糯米购物信息导航

练习8：城市场景动画