章节索引 :

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

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

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