09-关键帧动画&3D

image-20251125100829463

参考资料：

1. 关键帧动画

1.1 animation 复合属性

animation 用于创建动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 名称 持续时间 过渡类型 [延迟时间] [循环次数] [循环中是否反向运动] [填充模式];
eg:
animation: myrun1 2s linear infinite;
animation: myrun1 2s linear 1s infinite;
animation: myrun1 0.5s linear forwards;
animation: run 0.5s linear forwards reverse; /* reverse应用如:抽屉中关闭动画 */

/* 声明关键帧动画：from 相当于 0%， to 相当于 100% */
@keyframes myrun1 {
    /* 初始状态 */
    from {
        样式
    }
    /* 结束状态 */
    to {
        样式
    }
}

特别说明：

  • animation-fill-mode, 填充模式
    • none，默认，不保留动画
    • forwards，保留最后一帧，即最后画面
    • backwards，保留第一帧，即初始画面

1.2 animation-xxx 单一属性

image-20251203174605593

image-20251203174733881

image-20251203174806346

image-20251203172153436

示例：基本用法

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /* 调用动画 myrun，动画时间2s */
            /* animation: myrun1 2s linear; */
            /* animation: myrun2 2s linear; */
            /* 延迟1s，持续2s，执行2次 */
            /* animation: myrun1 2s linear 1s 2; */
            /* infinite：无限循环 */
            animation: myrun1 2s linear 1s infinite;
        }
        /* 声明关键帧动画，定义名称为：myrun1，按照【from, to】划分动画起始和结束过程 */
        /* from 相当于 0%， to 相当于 100% */
        @keyframes myrun1 {
            /* 初始状态 */
            from {
                width: 200px;
                height: 200px;
                background: red;
            }
            /* 结束状态 */
            to {
                width: 400px;
                height: 600px;
                background: green;
            }
        }
        /* 声明关键帧动画，定义为 myrun2，按照【百分比】划分动画过程 */
        @keyframes myrun2 {
            /* 初始状态 */
            0% {
                width: 200px;
                height: 200px;
                background: red;
            }
            20% {
                width: 200px;
                height: 400px;
                background: yellow;
            }
            50% {
                width: 400px;
                height: 400px;
                background: blue;
            }
            72% {
                width: 400px;
                height: 600px;
                background: gray;
            }
            /* 结束状态 */
            to {
                width: 400px;
                height: 600px;
                background: green;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
  • 改造明星资料卡案例中的图标一直旋转：

image-20251203173752135

效果：

chrome-capture-2025-12-03 (4)

  • 改造太极图一直旋转

image-20251203174410614

效果：

chrome-capture-2025-12-03 (5)

案例：抽屉效果

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        div{
            height: 100%;
            width: 200px;
            background: red;
            position: fixed;
            left: 0;
            top: 0;

            /* 容器宽度值，-100%刚好完全隐藏无需关心宽度具体值 */
            transform: translateX(-100%);
            /* 使用动画 */
            animation: run 0.5s linear forwards;
            /* 填充模式：none-没有(默认), forwards-保留最后一帧(最后画面), backwards-保留第一帧(初始画面) */
            /* animation-fill-mode: forwards; */

            /* 动画关闭，js去操作改值 */
            /* animation: run 0.5s linear forwards reverse; */
        }

        @keyframes run {
            from{
                transform: translateX(-100%);
            }
            to{
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

chrome-capture-2025-12-03 (6)

案例：轮播图效果

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 768px;
            height: 240px;
            margin: 10px auto;
            /* 在768px的宽度内，有溢出则隐藏 */
            overflow: hidden;
        }

        .swiper-container img{
            width: 768px;
            height: 240px;
        }

        .swiper-slide{
            /* 所有图片的div都浮动起来，横着排列 */
            float: left;
        }

        .swiper-wrapper{
            /* 为了有浮动空间，会根据父元素 overflow 去溢出隐藏 */
            width: 9999px;
            /* 调用动画，10s总时长(根据百分比均分动画帧数确定时间)，默认平滑过渡ease，无限循环 */
            animation: swiperrun 10s infinite;
        }

        /* 根据轮播图的数量，0%-100% 均分即可，如3张图为 0% 50% 100% */
        @keyframes swiperrun {
            0%{
                transform: translateX(0);
            }
            20%{
                /* 负值，X轴向左走 */
                transform: translateX(0);
            }
            40%{
                /* 25% 与 50% 位移尺寸一致，则动画为静止效果，实现临时停留效果 */
                transform: translateX(-768px);
            }
            60%{
                transform: translateX(-768px);
            }
            80%{
                 /* 75% 与 100% 位移尺寸一致，则动画为静止效果，实现临时停留效果 */
                transform: translateX(-1536px);
            }
            100%{
                 /* 75% 与 100% 位移尺寸一致，则动画为静止效果，实现临时停留效果 */
                transform: translateX(-1536px);
            }
        }

        /* 鼠标移入后，实现动画手动停留效果；鼠标移开自动继续播放动画 */
        .swiper-wrapper:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/3.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>

效果：

chrome-capture-2025-12-03 (7)

1.3 逐帧动画

steps(x, start|end) 逐帧动画参数，属于 animation-timing-function 参数的取值。

1
2
3
4
5
6
7
8
9
10
11
/* 
steps():
end - 保留当前帧，看不到最后一帧，动画结束看不见
start - 保留下一帧，看不到第一帧，从第一帧很快跳到下一帧

steps(1, start) == step-start
steps(1, end) == step-end
*/
animation: run 5s steps(1, start);
animation: run 5s step-start;
animation: run 5s step-end;

a

代码：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 190px;
            height: 250px;
            background-image: url(./img/a.png);
            /* 使用背景定位，来切换不同的图片实现动画效果 */
            background-position: -180px 0;

            animation: run 2s step-end infinite;
        }
        @keyframes run {
            0%{
                background-position: 0px 0;
            }
            14.3%{
                background-position: -180px 0;
            }
            28.6%{
                background-position: -360px 0;
            }
            42.9%{
                background-position: -540px 0;
            }
            57.2%{
                background-position: -720px 0;
            }
            71.5%{
                background-position: -900px 0;
            }
            85.8%{
                background-position: -1080px 0;
            }
            100%{
                background-position: -1260px 0;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

chrome-capture-2025-12-04

2. animate 动画库

1
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css

浏览器兼容：IE10+, FireFox, Chrome, Opera, Safari

image-20251204100456380

示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入动画库CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }
        .mytest {
            /* 如果浏览器不兼容，通过caniuse网站查询后需要前缀标记时，加上需要的前缀标记，如 -webkit- */
            /* -webkit-animation-iteration-count: 3; */
            animation-iteration-count: 3;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div class="animated bounce mytest"></div>
    <br>
    <div class="animated wobble mytest"></div>
</body>
</html>

效果：

chrome-capture-2025-12-04 (1)

3. 3D

2d场景：屏幕水平和垂直的交叉线X轴和Y轴。

3D场景：在垂直于2d屏幕的方向，多出一个Z轴。

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向。

image-20251204100854781

3.1 3D位移

translateZ() 或 translate3d()

image-20251204101812163

示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid black;
            margin: 0 auto;
            position: relative;
            /* 取值：flat 2d效果，preserve-3d 3d效果 */
            transform-style: preserve-3d;
            /* transform: rotateY(30deg); */
            /* 设置景深 */
            perspective: 900px;
        }

        .center{
            position: absolute;

            width: 200px;
            height: 200px;
            background: red;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
            /* 加个过渡动画验证效果 */
            transition: all 2s;
        }
        /* 鼠标移上去：正值-放大效果，负值-缩小效果 */
        .box:hover .center{
            /* transform: translateZ(700px); */
            /* 写法等同 */
            transform: translate3d(0, 0, 700px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>

效果：

chrome-capture-2025-12-04 (2)

3.2 3D旋转

rotateZ() 或 rotate3d()

示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 10px auto;
            display: flex;

            transform-style: preserve-3d;
        }
        .center{
            margin: auto;
            width: 200px;
            height: 200px;
            background: red;

            /* transform: rotateZ(30deg); */
            /* 前三个值取值：0 或 1，分别对应X Y Z轴 */
            transform: rotate3d(1, 1, 1, 30deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>

效果：

image-20251204103421688

3.3 3D缩放

scaleZ() 或 scale3d() 核心参数是放大的比例，如1-1倍，2-2倍…

image-20251204103629056

示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid gray;
            margin: 10px auto;
            display: flex;

            transform-style: preserve-3d;
            /* 景深 */
            perspective: 800px;
        }
        .center{
            margin: auto;
            width: 200px;
            height: 200px;
            background: red;

            /* Z轴需要配合景深+旋转，才能看到效果 */
            transform: scaleZ(6) rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>

image-20251204103957003

案例：立方体

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: 10px auto;
            border: 5px solid gray;
            
            transform-style: preserve-3d;
            position: relative;

            /* 用于手动旋转角度观察效果 */
            transform: rotateY(30deg) rotateX(30deg);

            animation: run 5s linear infinite;
        }
        @keyframes run {
            0%{
                transform: rotateY(30deg) rotateX(30deg);
            }
            50%{
                transform: rotateY(360deg) rotateX(360deg);
            }
            100%{
                transform: rotateY(30deg) rotateX(30deg);
            }
        }
        .box div{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            text-align: center;
            font-size: 100px;
            color: white;
            opacity: 0.8;
        }
        .box div:nth-child(1){
            background: red;
            transform: translateZ(100px);
        }
        .box div:nth-child(2){
            background: orange;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .box div:nth-child(3){
            background: purple;
            transform: translateY(-100px) rotateX(90deg);
        }
        .box div:nth-child(4){
            background: green;
            transform: translateY(100px) rotateX(-90deg);
        }
        .box div:nth-child(5){
            background: cyan;
            transform: translateX(100px) rotateY(90deg);
        }
        .box div:nth-child(6){
            background: blue;
            transform: translateZ(-100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

效果：

chrome-capture-2025-12-04 (3)

04_大前端 > 02_CSS
#CSS #CSS3 #关键帧动画 #3D
09-关键帧动画&3D
https://janycode.github.io/2017/04/28/04_大前端/02_CSS/09-关键帧动画&3D/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议