css steps 函数实现图像精灵动画-一一网

“这是我参与更文挑战的第23天，活动详情查看：更文挑战”

steps 函数初入门

steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。

其用法如下：

Steps(<number_of_steps>，<direction>)
复制代码

这个函数有两个参数——第一个参数是一个正值，指定我们希望动画分割的段数。

第二个参数定义了这个要点在我们的@keyframes中申明的动作将会发生的关键。这个值是可选的，在没有传递参数时，默认为”end”。

方向为”start”表示一个左–持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。
方向为”end”表示一个右–持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每个选择本质上从一个不同的面移动这个元素并且将产生一个不同的位置在这个相同的动画里。

css 精灵动画实现

css steps() 函数可以用来创建一些非常酷的图像精灵动画。我们可以看如下这张图：

打招呼背景图片

其一共有10帧，原始图片宽高 500×72 px，每帧 50×72 像素。

首先新建一个 div，宽高设置为 50×72，背景图片设置这张图。

html 结构：

<div class="hi"></div>
复制代码

css 样式：

.hi {
    width: 50px;
    height: 72px;
    background-image: url("https://www.proyy.com/skycj/data/images/2021-06-23/3eea1acdeee6b0e37b6cc6abb8f473d2.jpg");       
  animation: play .8s steps(10) infinite;
}
复制代码

其效果如下。可以看到是一个静态的图，只展示了第一帧：

新增 css 动画：

.hi {
   /* 相同代码略 */     
   animation: play .8s steps(10) infinite;
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}
复制代码