設置一個小盒子與一幀的小圖片等寬高

插動畫為背景圖

.box {width: 140px;height: 140px;border: 3px solid gold;margin: 100px auto;background: url(./images/bg.png); }

定義動畫? @keyframes+動畫名稱? 配合動畫盒子添加 animation?

.box {animation: move 2s steps(12) infinite;}@keyframes move {to {background-position: -1680px;}}

注：定義動畫中100%{ }與to{ }在簡單動畫中可以相互替換；

animation的屬性值 steps(幀數) ；linear 勻速（逐幀動畫中與steps沖突）；infinite 無限循環；alternate 反方向效果，“有去有回”視覺效果更好。

animation: move 2s steps(12) linear infinite alternate;

鼠標懸停后暫停：paused 配合hover使用。連寫 aps:paused;

.box:hover {animation-play-state: paused;}

總結

以上是生活随笔為你收集整理的steps 逐帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。