總結：主要在於 steps(12,end)函數，12代表整個動畫切成多少段 （類似flash時間軸）
end會跳過所有動畫的最后一個關鍵幀跑到循環的第二動畫個開頭；start的話會跳過第一個關鍵幀，直接跑第二個關鍵幀開始執行（每次動畫最后執行的關鍵幀到第二個循環的頭一個關鍵幀這個過渡就是它們偷吃跳掉的這個）
這個demo如果使用start參數的話會在第一個動畫結束切到第二輪開頭這段時間會多出個空白動畫 （因為start頭個關鍵幀不干活 ，所以這個過渡看到短暫的空白）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html body{ height: 100%; } #box{ position: absolute; left: 50%; top: 50%; width:48px; height: 48px; transform: translate(-50%,-50%); background-image: url("animation.png"); background-repeat: no-repeat; background-position:0 0; animation:1s move infinite steps(12,end) ; /*整個動畫執行時間 執行的動畫名 循環關鍵幀的次數 兩個關鍵幀之間的動畫效果*/ } @keyframes move { from{ background-position: 0,0; } to{ background-position: -576px,0; } } </style> </head> <body> <div id="box"> </div> </body> </html>
