CSS动画（快速入门）

一、动画使用

1.创建动画与调用动画

div {
    width: 200px;
    height: 100px;
    /* 调用动画 */
    animation: change_color 2s;
}
/* 创建动画（声明动画） */
@keyframes change_color {
    0% {
        background-color: pink;
    }
    100% {
        background-color: green;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.动画属性

HTML代码：

<div class="box">
        animation-timing-function:<b>ease效果</b>
        <div class="timing_ease"></div>
    </div>
    <div class="box">
        animation-timing-function:<b>linear效果</b>
        <div class="timing_linear"></div>
    </div>
    <div class="box">
        animation-timing-function:<b>steps效果</b>
        <div class="timing_steps"></div>
    </div>

    <div class="box">
        animation-delay:<b>2s效果（2秒后再执行动画）</b>
        <div class="delay"></div>
    </div>

    <div class="box">
        animation-iteration-count:<b>1(只执行1次动画)</b>
        <div class="iteration_count_1"></div>
    </div>

    <div class="box">
        animation-iteration-count:<b>infinite(不断执行动画)</b>
        <div class="iteration_count_infinite"></div>
    </div>

    <div class="box">
        animation-direction:<b>normal(不回溯)</b> 动画重复1次以上，才有效果
        <div class="direction_normal"></div>
    </div>
    <div class="box">
        animation-direction:<b>alternate(动画结束回溯)</b> 动画重复1次以上，才有效果
        <div class="direction_alternate"></div>
    </div>


    <div class="box">
        animation-fill-mode:<b>backwards(返回到0%的状态)</b>
        <div class="fill_mode_backwards"></div>
    </div>
    <div class="box">
        animation-fill-mode:<b>forwards(返回到100%的状态)</b>
        <div class="fill_mode_forwards"></div>
    </div>
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

div.box {
    float: left;
    width: 600px;
    height: 100px;
}

div.box div {
    /* 调用动画 */
    background-color: pink;
    width: 100px;
    height: 50px;
    animation: change_color 2s;
}


/* 速度曲线 */

div.box .timing_ease {
    animation-timing-function: ease;
}

div.box .timing_linear {
    animation-timing-function: linear;
}

div.box .timing_steps {
    animation-timing-function: steps(5);
}


/* 延時 */

div.box .delay {
    animation-delay: 2s;
}


/* 动画重复次数 */

div.box .iteration_count_1 {
    animation-iteration-count: 1;
}

div.box .iteration_count_infinite {
    animation-iteration-count: infinite;
}


/* 动画是否反向播放 */

div.box .direction_normal {
    animation-iteration-count: infinite;
    animation-direction: normal;
}

div.box .direction_alternate {
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


/* 动画结束状态 */

div.box .fill_mode_backwards {
    animation-fill-mode: backwards;
}

div.box .fill_mode_forwards {
    animation-fill-mode: forwards;
}


/* 创建动画（声明动画） */

@keyframes change_color {
    0% {
        background-color: pink;
        width: 100px;
        height: 50px;
    }
    100% {
        background-color: green;
        width: 50px;
        height: 25px;
    }
}
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

二、2D操作

HTML代码：

<h1>移动：</h1>
    <div class="clearfix">
        <div class="box">
            translate(100px, 50px)
            <div class="translate"></div>
        </div>

        <div class="box">
            translateX(100px)
            <div class="translateX"></div>
        </div>

        <div class="box">
            translateY(50px)
            <div class="translateY"></div>
        </div>
    </div>

    <h1>旋转：</h1>
    <div class="clearfix">
        <div class="box">
            rotate(30deg)
            <div class="rotate_30deg"></div>
        </div>

        <div class="box">
            rotate(-30deg)
            <div class="rotate_-30deg"></div>
        </div>

        <div class="box">
            transform-origin:left bottom;(定义修改中心点，默认50% 50%)
            <div class="transform_origin_left_bottom"></div>
        </div>
    </div>

    <h1>放大：</h1>
    <div class="clearfix">
        <div class="box">
            scale(1.5,2)
            <div class="scale1"></div>
        </div>

        <div class="box">
            scale(2)
            <div class="scale2"></div>
        </div>

    </div>
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

CSS代码：

.clearfix::after,
.clearfix::before {
    display: table;
    content: "";
}

.clearfix::after {
    clear: both;
}

div.box {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 10px;
    background-color: pink;
}

div.box div {
    width: 50px;
    height: 50px;
    background-color: green;
    animation-iteration-count: infinite !important;
}

div.box div.translate {
    animation: move1 2s;
}

div.box div.translateX {
    animation: move2 2s;
}

div.box div.translateY {
    animation: move3 2s;
}

@keyframes move1 {
    100% {
        transform: translate(100px, 50px);
    }
}

@keyframes move2 {
    100% {
        transform: translateX(100px);
    }
}

@keyframes move3 {
    100% {
        transform: translateY(50px);
    }
}

div.box div.rotate_30deg {
    animation: rotate1 2s;
}

div.box div.rotate_-30deg {
    animation: rotate2 2s;
}

div.box div.transform_origin_left_bottom {
    animation: rotate3 2s;
}

@keyframes rotate1 {
    100% {
        transform: rotate(30deg);
    }
}

@keyframes rotate2 {
    100% {
        transform: rotate(-30deg);
    }
}

@keyframes rotate3 {
    100% {
        transform: rotate(45deg);
        transform-origin: left bottom;
    }
}

div.box div.scale1 {
    margin-top: 50px;
    animation: scale1 2s;
}

div.box div.scale2 {
    margin-top: 50px;
    animation: scale2 2s;
}

@keyframes scale1 {
    100% {
        transform: scale(1.5, 2);
    }
}

@keyframes scale2 {
    100% {
        transform: scale(2);
    }
}
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

三、3D操作

HTML代码：

<div class="move clearfix">
        <h1>3D移动</h1>
        <div class="box">
            translateZ(50px)
            <div class="translateZ"></div>
        </div>
        <div class="box">
            translateX(50px)
            <div class="translateX"></div>
        </div>
        <div class="box">
            translateY(50px)
            <div class="translateY"></div>
        </div>
        <div class="box">
            translate3d(50px,50px,50px)
            <div class="translate3d"></div>
        </div>
    </div>
    <div class="rotate clearfix">
        <h1>3D旋转</h1>

        <div class="content">
            rotateX(180deg);
            <div class="box">
                <div class="rotateX"></div>
            </div>
            <div class="box2">
            </div>
            <span class="x">X轴</span>
            <span class="y">Y轴</span>
            <span class="z">Z轴</span>

        </div>
        <div class="content">
            rotateY(180deg);
            <div class="box">
                <div class="rotateY"></div>
            </div>
            <div class="box2">
            </div>
            <span class="x">X轴</span>
            <span class="y">Y轴</span>
            <span class="z">Z轴</span>
        </div>
        <div class="content">
            rotateZ(45deg);
            <div class="box">
                <div class="rotateZ"></div>
            </div>
            <div class="box2">
            </div>
            <span class="x">X轴</span>
            <span class="y">Y轴</span>
            <span class="z">Z轴</span>
        </div>
    </div>
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

CSS代码：

.clearfix::after,
.clearfix::before {
    display: table;
    content: "";
}

.clearfix::after {
    clear: both;
}

.move .box {
    position: relative;
    float: left;
    width: 250px;
    height: 200px;
    margin-left: 10px;
    background-color: pink;
    perspective: 400px;
    transform-style: preserve-3d;
}

.move .box div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background-color: green;
    animation-iteration-count: infinite !important;
}

.translateZ {
    animation: translateZ 2s;
}

@keyframes translateZ {
    100% {
        transform: translateZ(50px);
    }
}

.translateX {
    animation: translateX 2s;
}

@keyframes translateX {
    100% {
        transform: translateX(50px);
    }
}

.translateY {
    animation: translateY 2s;
}

@keyframes translateY {
    100% {
        transform: translateY(50px);
    }
}

.translate3d {
    animation: translate3d 2s;
}

@keyframes translate3d {
    100% {
        transform: translate3d(50px, 50px, 50px);
    }
}

.rotate .content {
    position: relative;
    float: left;
    width: 250px;
    height: 200px;
    margin-left: 10px;
    border: 1px solid pink;
    perspective: 400px;
    transform-style: preserve-3d;
}

.content .box {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateY(-45deg) !important;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.content .box2 {
    position: absolute;
    z-index: 999;
    top: 50px;
    left: 30px;
    width: 100px;
    height: 100px;
    transform: rotateY(45deg) !important;
    border-bottom: 1px solid #000;
}

.content .x {
    position: absolute;
    top: 125px;
    left: 186px;
}

.content .y {
    position: absolute;
    top: 28px;
    left: 120px;
}

.content .z {
    position: absolute;
    top: 125px;
    left: 18px;
}

.rotate .content .box div {
    position: absolute;
    left: -25px;
    bottom: -25px;
    width: 50px;
    height: 50px;
    background-color: green;
    animation-iteration-count: infinite !important;
}

.rotateX {
    animation: rotateX 2s;
}

@keyframes rotateX {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(180deg);
    }
}

.rotateY {
    animation: rotateY 2s;
}

@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

.rotateZ {
    animation: rotateZ 2s;
}

@keyframes rotateZ {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(45deg);
    }
}
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173