CSS steps()动画的详解

什么是CSS steps()动画

CSS steps()函数是一种用于创建阶梯式动画的关键帧函数。它可以用于定义在不同关键帧之间切换的步骤数量以及动画的执行方式。步骤数量定义了动画的离散程度，动画执行方式决定了步骤的变化速率。

在CSS3中，steps()函数是通过animation-timing-function属性来使用的。它可以在动画过程中实现图像或元素的离散动画效果，与其他动画函数相比，steps()函数更适用于实现分帧动画效果。

CSS steps() 函数的语法

CSS steps()函数的语法如下：

animation-timing-function: steps(number_of_steps[, direction]);

number_of_steps：定义了动画切换的步骤数量。它可以是一个正整数或者是关键字 “start” 或 “end”。
direction：可选参数，定义了动画的执行方向。它可以是 “start”（从第一步开始），或者是 “end”（从最后一步开始）。默认值为 “end”。

CSS steps()函数的工作原理

CSS steps()函数在关键帧之间切换的时候，会根据指定的步骤数量和执行方向以离散的方式进行变化。每个步骤之间的变化会瞬间发生，从而营造出类似于电影或动画帧的效果。

具体来说，number_of_steps 定义了每个关键帧之间的步骤数量。如果 number_of_steps 是一个正整数，那么动画会在每个关键帧之间按照这个数量的步骤进行切换。

如果 number_of_steps 是 “start”，则动画会从第一帧开始进行切换。而如果 number_of_steps 是 “end”，则动画会从最后一帧开始进行切换。

direction 参数是可选的，用于定义动画的执行方向。如果 direction 是 “start”，则动画会从第一帧开始进行切换；如果 direction 是 “end”，则动画会从最后一帧开始进行切换。如果 direction 参数未指定，则默认值为 “end”。

CSS steps() 函数的应用场景

CSS steps()函数适用于需要创建分帧动画效果的场景，例如实现像素风格、翻页效果、动画骨架等效果。

像素风格动画

像素风格动画是一种运动过程中只显示像素级的逐帧动画效果。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: pixel-animation;
      animation-duration: 1s;
      animation-timing-function: steps(4);
      animation-iteration-count: infinite;
    }

    @keyframes pixel-animation {
      0% {
        background-color: red;
      }
      25% {
        background-color: yellow;
      }
      50% {
        background-color: blue;
      }
      75% {
        background-color: green;
      }
      100% {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

运行代码后，你会看到一个背景色逐帧变化的方块。由于 animation-timing-function 设置为 steps(4)，每个关键帧之间会按照4个步骤进行切换。

翻页效果

翻页效果通常是将一个元素的内容分割成多个页面，并通过切换页面来创建翻页动画效果。CSS steps()函数可以用于指定翻页动画状态的离散切换。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .book {
      width: 200px;
      height: 300px;
      background-color: white;
      overflow: hidden;
      perspective: 1000px;
    }

    .page {
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    .page-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .page-1 {
      background-color: red;
    }

    .page-2 {
      background-color: green;
    }

    .page-3 {
      background-color: blue;
    }

    .page-4 {
      background-color: yellow;
    }

    .page-5 {
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="book">
    <div class="page page-1">
      <div class="page-inner">Page 1</div>
    </div>
    <div class="page page-2">
      <div class="page-inner">Page 2</div>
    </div>
    <div class="page page-3">
      <div class="page-inner">Page 3</div>
    </div>
    <div class="page page-4">
      <div class="page-inner">Page 4</div>
    </div>
    <div class="page page-5">
      <div class="page-inner">Page 5</div>
    </div>
  </div>
</body>
</html>

运行代码后，你会看到一个类似于翻书的效果。每次切换页面时，都会通过 steps(1) 的离散切换模式来展示下一页或上一页的内容。

动画骨架

动画骨架是指在网页加载或数据加载过程中用于预览动画效果的一种技术。CSS steps()函数可以用于定义在动画加载过程中，每帧动画的切换方式，从而通过离散的切换模式给用户提供更好的用户体验。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .skeleton-animation {
      width: 300px;
      height: 200px;
      background-color: #f1f1f1;
      animation-name: skeleton;
      animation-duration: 1s;
      animation-timing-function: steps(4);
      animation-iteration-count: infinite;
    }

    @keyframes skeleton {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -400px 0;
      }
    }
  </style>
</head>
<body>
  <div class="skeleton-animation"></div>
</body>
</html>

运行代码后，你会看到一个模拟加载动画的效果。每个关键帧之间会按照 steps(4) 的方式进行切换，从而给用户展示一个骨架屏的加载效果。