基础知识
关键帧（传递点）是在动画中定义更改的帧。@keyframes定义元素如何随每个关键帧而变化。为了使动画与其关键帧匹配，需要将@keyframes规则的名称与为元素指定的animation-name属性的名称相匹配。@keyframes规则的名称声明为@keyframes + 任意名称。0％表示开始动画，100％表示结束时间。下面的示例是将背景颜色从红色更改为橙色到粉红色的关键框架。
1
2
3
4
5
6
7
8
9
10
11
@keyframes name {
0% { background: red; }
50% { background: orange; }
100% { background: pink; }
}
@-webkit-keyframes name {
0% { background: red; }
50% { background: orange; }
100% { background: pink; }
}
说明：对于Chrome和Safari等WebKit浏览器，需要供应商前缀（-webkit-）。以这种方式编写-webkit-keyframes。
相关属性
-
animation-name（动画名）
@keyframes定义的名称。如果未指定此项，则不会执行动画。此外，如果指定的动画名称与任何关键帧都不匹配，则不会执行该关键帧。
-
animation-duration（动画持续时间）
通过
秒 + s指定执行一个动画的时间长度。例如，5s持续5秒。如果为0，则不会执行。即使指定了负值，也会将其视为0。 -
animation-timing-function（动画定时功能）
指定动画的时间以及如何继续。可以通过调整动画进度速度的比例来表达平滑运动。
-
animation-delay（动画延迟）
读取元素时，从
元素编号 + s指定“动画开始”的时间。例如，5s持续5秒。初始值0将立即执行。 -
animation-iteration-count（动画迭代计数）
使用数字指定重复动画的次数。infinite指定无限循环。
-
animation-direction（动画方向）
指定重复动画的方向。
- normal：正常方向播放（初始值）。
- alternate：在正常和偶数时间以相反方向重新生成奇数次。
- reverse：向后播放。
- alternate-reverse：反向播放。
-
animation-play-state（动画播放状态）
- paused：暂停。
- running：播放。
-
animation-fill-mode（动画填充模式）
指定播放动画之前和之后的状态。
- none：默认值。
- forwards：播放后保持最后一个关键帧的状态。
- backwards：在播放前应用第一个关键帧的状态。
- both … forwards：向前和向后都应用。
属性总结
animation允许您分别指定每个属性的值，用空格分隔。项目可以省略，但动画名称必须在执行前写入。建议按以下顺序列出。
1
2
3
4
5
6
7
8
animation-name（动画名称）
animation-duration（动画持续时间）
animation-timing-function（动画定时功能）
animation-delay（动画延迟）
animation-iteration-count（动画迭代计数）
animation-direction（动画方向）
animation-fill-mode（动画填充模式）
animation-play-state（动画播放状态）
具体实现
在了解了基础的知识之后，我们来详细看看具体的实现方法。首先，将关键帧的名称设置为“bg-color”，并将背景颜色设置为从0到100％的过渡。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
由于此时指定整个网页的背景颜色，body以animation指定属性。值分别为关键帧名称，bg-color更改在10秒内添加，无限循环infinite。不要忘记webkit的版本。
1
2
3
4
5
body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}
完整代码
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
</style>
</head>
<body></body>
</html>