[动图] 用css的animation+帧序列实现动画

[接前文《[动图] 前端动图实现方式整理》](https://segmentfault.com/a/1190000044102194)
这篇文档详细说一说 第3种，帧序列(png/jpg + css) 的实现

注意下面这段代码不是原生的CSS语法，在关键帧部分使用了SCSS语法来批量for循环处理（需要安装sass-loader以支持编译），通过改变背景图片的位置来实现连续的动画效果。

<style>
.banner {
  Position: absolute;
  top: 35px;
  width: 100px;
  height: 50px;
  background: url(‘../assets/png-sequence.png’) no-repeat;
  background-size: 1000px 50px;    (这里写素材的真实尺寸)
  animation: standardAnimation 1s forwards steps(1) infinite;
}
@keyframes standardAnimation {
  @for $i from 0 through 9 {
      #{$i/9*100}% { background-position: 0 #{-100*$i}px; }
  }
}
</style>

对上面的代码段中的重点进行说明：
.banner 类定义了一个元素，使用了绝对定位，其中最关键的是设置宽高属性(width: 100px; height: 50px;) 这就是动图窗口的尺寸。

.banner类中的background 属性设置了背景图像，即一张帧序列的雪碧图。这里使用了名为 png-sequence.png 的图片，它可以由一系列图片帧合成。(这里background-size: 1000px 50px; 那就是水平平铺合成的了)

.banner类中的background-size 属性设置了背景图片的大小，使用了图片的真实尺寸。这样可以确保每个图像帧按照真实尺寸显示。

.banner类中的animation 属性定义了动画效果。standardAnimation 是一个关键帧动画的名称。它使用了 1s 的持续时间，forwards 表示动画完成后保持最后一个关键帧状态，steps(1) 表示动画每一步显示一个图像帧，infinite 表示动画循环播放。

关键帧动画部分使用了 SCSS 的语法：
@keyframes standardAnimation 定义了一个关键帧动画 standardAnimation。
使用 @for 循环来生成关键帧。循环从 0 到 9（共 10 次），每次循环生成一个关键帧。

{$i/9*100}% 是 SCSS 中的变量插值语法，用于表示关键帧的百分比位置。这样可以确保每个关键帧在适当的时间显示。

background-position: 0 #{-100*$i}px; 设置了当前关键帧的背景位置。根据循环变量 $i，每个关键帧显示不同的图像帧。

注意两点：
1、
from 0 through 9 从0到9（包括9） 共10个
from 0 to 9 从0到9（不包括9） 共9个

2、
在上述的语法使用环境中 #{$i/9*100}% { background-position: 0 #{-100*$i}px; }
不能使用Math.floor以及parseInt来取整，因此图片素材只能做成单行或者单列，不能做成阵列。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/yg6gif3psqu1v268