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. 小结
光学会如何定义动画还够，必须要学会 调用 动画才能够让动画真正的运行起来。
那么赶紧翻到 下一页 让我们一起看看如何 调用 动画吧。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did100557