[接前文《[動圖] 前端動圖實現方式整理》](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