如何用CSS動畫流暢地播放圖片序列？

如何使用css動畫實現流暢的圖片序列播放？

許多場景需要模擬視頻播放效果，但素材卻是圖片序列。直接替換圖片路徑的方法效率低下，容易出現加載延遲導致的黑屏或錯亂。本文提供一種基于CSS動畫的解決方案，有效避免此類問題。

預加載所有圖片并非最佳方案，尤其圖片數量龐大時，管理和加載成本過高。

更優的策略是將圖片拼接成一張長圖。假設所有圖片尺寸相同（例如500×300像素），將三張圖片水平拼接成1500×300像素的長圖。利用CSS的background-position屬性和@keyframes動畫，即可模擬圖片播放。

立即學習“前端免費學習筆記（深入）”；

以下CSS代碼示例：

.container {   width: 500px;   height: 300px;   background: url("拼接后的圖片") left / auto 100% no-repeat;   animation: play 動畫時長 steps(1, start) 0s infinite normal none; }  @keyframes play {   from { background-position: 0 0; } /* 第1張 */   33.3% { background-position: -500px 0; } /* 第2張 */   66.7% { background-position: -1000px 0; } /* 第3張 */   to { background-position: 0 0; } /* 回到第1張，循環播放 */ }

代碼中，.container定義容器，背景圖片為拼接的長圖。animation屬性定義動畫play，steps(1, start)確保動畫步進播放，動畫時長需根據圖片數量和播放速度調整。background-position控制顯示區域，通過修改其值切換圖片。keyframes中的百分比需根據圖片數量和尺寸調整，精確控制每張圖片的顯示時間。

此方法避免了逐張加載，提升播放流暢度，代碼簡潔易懂。前提是所有圖片尺寸一致。尺寸不一致則需使用canvas或其他圖像處理技術預先處理。