1. 开场白
入门了动画以后，就来看看应该如何在网页中写出一个动画吧！
万丈高楼平地起，学会了基础语法就可以充分发挥自己的想象力，做出各种千奇百怪的动画效果啦！
2. 动画的定义
如果学过一些编程语言的同学会知道，有一个词叫做变量，这个变量通常是需要事先定义好才能够去使用。CSS 动画也是同理，需要先定义，才能够去使用。接下来我们就来看看该如何定义一个 CSS 动画：
@keyframes 动画名 {
动画内容
}
@keyframes 是一个固定的写法，表示要定义一个动画，后面要空一格再写你的动画名，然后大括号里面再写上对应的动画内容。
学过 JavaScript 的同学（没学过的话也没关系，可以继续往下看）可以把 @keyframes 理解为 JS 中的 var，就相当于定义了一个变量。
大括号里面写的可以是百分比，百分比后面的大括号里面就是你自己想要的 CSS 样式啦！假如我们定义一个名为 change-color 的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@keyframes</title>
<style>
/* 先定义一个名为change-color的动画 */
@keyframes change-color {
0% { color: red } /* 红 */
16% { color: orange } /* 橙 */
32% { color: yellow } /* 黄 */
48% { color: green } /* 绿 */
64% { color: cyan } /* 青 */
80% { color: blue } /* 蓝 */
100% { color: purple } /* 紫 */
}
</style>
</head>
<body>
</body>
</html>
TIPS：0% 可以写成 from，100% 可以写成 to，效果完全一致，只是一个别名。
我们按照红橙黄绿青蓝紫的这么一个彩虹颜色顺序定义了一个名为 change-color 的动画，但是此时却没有任何的效果，这是因为目前仅仅只是定义了这个动画，并没有去指定哪个元素会用到这个动画，以及该如何使用这个动画。那么接下来就让我一起来看看该如何使用这个动画吧！
3. 小结
光学会如何定义动画还够，必须要学会调用动画才能够让动画真正的运行起来。
那么赶紧翻到下一页让我们一起看看如何调用动画吧。