测试4
测试大礼包
爬虫实战特训课

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. 小结

光学会如何定义动画还够，必须要学会调用动画才能够让动画真正的运行起来。

那么赶紧翻到下一页让我们一起看看如何调用动画吧。