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)](C:\Users\jiang\Downloads\chrome-capture-2025-12-03 (5).gif)

案例：抽屉效果

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)

案例：逐帧动画效果

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