1. 适合过渡动画的场景

最典型的一个例子就是当鼠标移入时进行一些动画效果：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transition</title>
  <!-- 中文渐变色的CSS库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">

  <!-- 中文布局的CSS库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    
    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ul {
      /* 网格布局 */
      display: grid;

      /* 引入了chinese-layout这个库，所以可以用中文 */
      grid: var(--六宫格);

      /* 间距10px */
      gap: 10px;

      /* 给个宽高 */
      width: 300px;
      height: 200px;

      /* 清除默认样式 */
      list-style: none;
    }

    li {
      /* 引入了chinese-gradient这个CSS库，所以可以用中文 */
      background: var(--怦然心动);

      /* 过渡属性，有了这个属性才会有过渡效果 */
      transition: transform .2s;
    }
    
    li:hover {
      /* 鼠标移入时进行放大 */
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transition</title>
  <!-- 中文渐变色的CSS库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">

  <!-- 中文布局的CSS库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }
    
    /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ul {
      /* 网格布局 */
      display: grid;

      /* 引入了chinese-layout这个库，所以可以用中文 */
      grid: var(--六宫格);

      /* 间距10px */
      gap: 10px;

      /* 给个宽高 */
      width: 300px;
      height: 200px;

      /* 清除默认样式 */
      list-style: none;
    }

    li {
      /* 引入了chinese-gradient这个CSS库，所以可以用中文 */
      background: var(--怦然心动);

      /* 过渡属性，有了这个属性才会有过渡效果 */
      transition: transform .2s;
    }
    
    li:hover {
      /* 鼠标移入时进行放大 */
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

运行结果：

不过眼尖同学可以发现CSS里面居然可以写中文，这是怎么回事呢？
原来是因为我们引入了一个CSS库来美化了我们的样式：

渐变色官方文档：https://www.yuque.com/vue-sharp/xflqsh/yxn4m7
布局官方文档：https://www.yuque.com/vue-sharp/oco0rf/ded6m5

2. 小结

其实你在大部分网站看到的一些交互动画都是过渡动画，这么一看感觉好像帧动画没什么优势啊。

其实不然，接下来我们将用雪碧图来让大家见识一下帧动画的厉害之处。