共计 1403 个字符，预计需要花费 4 分钟才能阅读完成。
[接前文《[ 动图] 前端动图实现形式整顿》](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