CSS 日常练习----animation

记录日常 CSS 练习的小知识点 —— animation

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
.animation1{
width: 200px;
height: 200px;
background: red;
animation: larger 5s linear;
}
@keyframes larger {
100%{
background: #000;
height: 400px;
width: 400px;
}
}
.animation2{
width: 200px;
height: 200px;
background: red;
animation: test 5s linear;
}
@keyframes test {
80%{
width: 400px;
height: 400px;
}
}
.animation3{
width: 200px;
height: 200px;
background: red;
animation: test 5s linear 10s forwards;
}
.animation3{
width: 200px;
height: 200px;
background: red;
animation: test 5s linear 10s backwards;
}
@keyframes test {
0%{
background: pink;
}
20%{
background: blueviolet;
}
100%{
background: black;
}
}
</style>
</head>
<body>
<p>normal:从开始执行到100%,再瞬间回到初始状态</p>
<p>关键帧:如果0%或100%不指定关键帧,将使用该元素默认的属性值</p>
<div class="animation1">我是动画1</div>
<div class="animation2">我是动画2,有一种动画结束后逐帧回到起始状态的错觉,其实是100%的状态和初始相同</div>
<p>
none :表示等待期和完成期,元素样式都为初始状态样式,不受动画定义(@keyframes)的影响。<br>

forwards :表示等待期保持初始样式,完成期间保持最后一帧样式。<br>

backwards :表示等待期为第一帧样式,完成期跳转为初始样式<br>

both :表示等待期样式为第一帧样式,完成期保持最后一帧样式。<br>

</p>
<div class="animation3">animation-fill-mode:forward</div>
<div class="animation4">animation-fill-mode:backwards</div>
</body>
</html>
0%