用animation做動畫時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實現逐幀動畫。 steps(num，start/end) 第一個值num表示把動畫分成了多少 ...
用animation做動畫時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實現逐幀動畫。
steps(num，start/end) 第一個值num表示把動畫分成了多少段；第二個值預設為end，較難理解此處不做深究。
以下實例中圖片大小為1260px*300px,共分7幀，故num值為7
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 .box{ 9 width: 200px; 10 height: 300px; 11 background: pink url(img/charector.png) ; 12 animation:name 1s steps(7) infinite; 13 } 14 @keyframes name{ 15 0%{ 16 background-position: 0 0; 17 } 18 100%{ 19 background-position: -1260px 0; 20 } 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"></div> 26 </body> 27 </html>
原圖如下：
動畫效果如下：
