CSS 动画的调用

回到首页 个人中心 反馈问题 注册登录
下载APP
章节索引 :

1. 调用动画

定义好动画之后就需要在想要的位置去调用啦，先来学习一下动画调用的语法：

animation: name duration timing-function delay iteration-count direction fill-mode;

当然写的时候可绝对不是这么写的啊，只有冒号前面的animation这个单词不变，剩下单词全部都要替换，那么要替换成什么呢？

请看中文翻译版：

animation: 定义过的动画名 动画时长 动画运行的方式 延迟 动画次数 动画方向 填充模式;

是不是看到这里直接晕了，甚至有种想关掉网页的冲动？不要怕，这些只是看起来吓人，其实都是纸老虎。

而且也不是这些属性都要用到，哪个属性你用不到就可以不写，通常我们只会用到几个常用的。

2. 极简形式

先说说最最简单的一种方式，看了绝对不懵圈的那种：

animation: name duration;

翻译如下：

animation: 定义过的动画名 动画时长;
实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 定义动画：动画名(change-color) */ 
    @keyframes change-color {
      from /* 0% */ { color: red } /* 红 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黄 */
      48% { color: green } /* 绿 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 蓝 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 300px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 10s;
      /* 动画：动画名(change-color) 时长(10秒) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(10秒) -->
    animation: change-color 10s;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

可以看出整段文字按照咱们定义的 change-color 动画来运行：赤橙黄绿青蓝紫一共十秒，但十秒过后字变黑了，因为这段字默认的颜色本来就是黑色的。

3. 无限循环

如果我们不想让它结束，那就十秒过后再来十秒，十秒完再十秒，无限重复、无限循环：

animation: name duration iteration-count;

翻译过来就是：

animation: 定义过的动画名 动画时长 动画次数;
实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 红 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黄 */
      48% { color: green } /* 绿 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 蓝 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 10s infinite;
      /* 动画：动画名(change-color) 时长(10秒) 动画次数(无限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(10秒) 动画次数(无限) -->
    animation: change-color 10s infinite;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

  • 运行次数可以写具体的数字，动画会根据你写的数字来运行相应的次数，想要无限运行的话就写infinite

虽然成功的无限循环了，但是目前看来有个缺点，那就是最后一帧紫色结束后突然就变成了第一帧的红色，没有任何的过渡效果。

有两个解决方案：

1. 定义动画的时候最后一帧再变回红色：

实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red }  /* 红 */
      13% { color: orange } /* 橙 */
      26% { color: yellow } /* 黄 */
      39% { color: green } /* 绿 */
      52% { color: cyan } /* 青 */
      65% { color: blue } /* 蓝 */
      78% { color: purple } /* 紫 */
      to /* 100% */ { color: red } /* 最后一帧和第一帧的样式一致 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 6s infinite;
      /* 动画：动画名(change-color) 时长(6秒) 动画次数(无限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(6秒) 动画次数(无限) -->
    animation: change-color 6s infinite;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

2. 交替动画

什么是交替动画呢？简单来说就是从第一帧红到最后一帧紫运行完了之后，再从最后一帧紫到第一帧红，然后再从红到紫、从紫到红，大红大紫。

这种动画就不用最后一帧再定义回第一帧的红色了，直接定义从红到紫即可。来看看语法：

animation: 定义过的动画名 动画时长 动画次数 动画方向;
实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 红 */ 
      to /* 100% */ { color: purple } /* 为了方便直接从红到紫 */ 
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 1s infinite alternate;
      /* 动画：动画名(change-color) 时长(1秒) 动画次数(无限) 动画方向(交替运行) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(1秒) 动画次数(无限) 动画方向(交替运行) -->
    animation: change-color 1s infinite alternate;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

4. 帧动画

语法：

animation: 定义过的动画名 动画时长 动画运行的方式;

动画运行的方式要用到steps这个函数。

看起来可能有点晕，但是我们写成英文看起来就会好很多：

animation: change-color 7s steps(10);

这里面唯一一个新鲜词就是steps，这个steps后面要写上小括号，括号里面就是这次动画要按照多少帧来运行，来看个具体的案例：

实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 红 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黄 */
      48% { color: green } /* 绿 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 蓝 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 7s steps(1);
      /* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(steps(1)) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(steps(1)) -->
    animation: change-color 7s steps(1);
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

可以看到这就按照我们所设想的那样：红、橙、黄、绿、青、蓝、紫……

咦？紫呢？怎么最后直接跳过紫色直接就进入黑色了呢？

原来，这里涉及到了一个帧动画里面一个难以理解的点，在讲这点之前我们先来看结论，这样的话即使没弄懂到底是怎么一回事也可以直接记住结论，让动画按照我们预先设想的那样去运行。

4.1 非循环式帧动画

语法：

animation: 动画名 时长 step-end both;

来看具体案例：

实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from { color: red }
      16% { color: orange }
      32% { color: yellow }
      48% { color: green }
      64% { color: cyan }
      80% { color: blue }
      to { color: purple }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 7s step-end both;
      /* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 填充模式(双向) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 填充模式(双向)-->
    animation: change-color 7s step-end both;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

可以看到成功了，紫色出来了，而且永远都不会再回到默认的黑色了。

这究竟是怎么一回事呢？step-end和both这两个单词到底是什么意思呢？

先不要着急，咱们先把结论记下来，原理放到后面讲。

4.2 循环式帧动画

语法：

animation: 动画名 时长 step-end infinite;

除了在调用动画的语法上最后一个单词不一样，其实主要区别在于定义动画时，定义动画的时候可以多加一帧，来看具体案例：

实例演示
预览 复制
复制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除浏览器默认边距 */
    * { padding: 0; margin: 0; }

    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定义动画，动画名叫：change-color */
    @keyframes change-color {
      from { color: red }
      14% { color: orange }
      28% { color: yellow }
      42% { color: green }
      56% { color: cyan }
      70% { color: blue }
      84% { color: purple }
      to { color: aquamarine }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用预先定义好的动画 */
      animation: change-color 7s step-end infinite;
      /* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 动画次数(无限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 动画次数(无限)-->
    animation: change-color 7s step-end infinite;
  </div>
</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

反正最后一帧出不来，那我们直接就在最后多加一帧不就得了，最后一帧写什么都可以，反正最后一帧就像空气一样——你永远也看不到。

5. 小结

学会了这一章，你就已经可以实现一些简单的动画效果了，但是为什么最后一帧会消失呢？

这和 steps 函数的运行机制有关，其实它的原理并不复杂，但就是因为不符合人类的直觉导致许多人无法理解。

接下来的章节我们就来深入的理解一下这个神秘的 steps 函数。

什么是雪碧图？
什么是雪碧图？ 雪碧图和雪碧之间有什么关系？ 为什么要使用雪碧图？ 雪碧图过时了吗？
雪碧图的常见形式
JPG 格式图片 PNG 格式图片 SVG 格式图片 雪碧图：矩形图 雪碧图：条形图
雪碧图的语法
背景图片 背景图定位 动态变更背景图位置 雪碧图尺寸不吻合时怎么办？
动画入门
过渡动画和帧动画的区别 适合过渡动画的场景 适合用帧动画的场景 帧动画和过渡动画的优缺点
帧动画基础
CSS 动画的定义 CSS 动画的调用 帧动画函数steps()的解析
动画实战
动画实例项目结构 定义动画 调用动画 连接两个雪碧图的动画
CSS 动画的调用
19/24
字体 A

A
目录
书签
收藏
A
大小