关于前端:动图-用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