动画

2021-10-02 22:43:34 大约 2 分钟

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

要创建 CSS3 动画，需要先了解 @keyframes 规则：

使用@keyframes定义动画。
在@keyframes规则内定义开始和结束状态，定义的样式将逐步从目前的样式更改为新的样式。

步骤：

定义动画 dong_hua。
定义动画规则from和to。
使用动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 1. 定义动画:*/
        @keyframes dong_hua {
            /* 开始状态:*/
            from {
                transform: translateX(0px);
                background-color: red;
            }
            /* 结束状态 */
            to {
                transform: translateX(1000px);
                background-color: #222;
            }
        }

        /*或使用百分比*/
        @keyframes dong_hua {
            0% {
                background: red;
            }
            25% {
                background: yellow;
            }
            50% {
                background: blue;
            }
            100% {
                background: green;
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            /*简写*/
            animation: dong_hua 3s;
            /*调用动画*/
            /*animation-name: dong_hua;*/
            /*animation-duration: 3s;*/
            /*动画固定到结束位置*/
            /*animation-fill-mode: forwards;*/
            /*无限循环动画*/
            /*animation-iteration-count: infinite;*/
        }
    </style>
</head>
<body>
<div>
    <div class="box"></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

提示

使用动画至少定义：动画名称和动画时长。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes (opens new window)	规定动画。	3
animation (opens new window)	所有动画属性的简写属性。	3
animation-name (opens new window)	规定 @keyframes 动画的名称。	3
animation-duration (opens new window)	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function (opens new window)	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode (opens new window)	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay (opens new window)	规定动画何时开始。默认是 0。	3
animation-iteration-count (opens new window)	规定动画被播放的次数。默认是 1。	3
animation-direction (opens new window)	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state (opens new window)	规定动画是否正在运行或暂停。默认是 "running"。	3

动画

详情