相信 animation 大家都用過很多，知道是 CSS3做動畫用的。而我自己就只會在 X/Y軸 上做位移旋轉，使用 animation-timing-function 規定動畫的速度曲線，常用到的 貝塞爾曲線。但是這些動畫效果都是連續性的。
今天發現個新功能 animation-timing-function 的另外個屬性值 steps()功能符，可以讓動畫不連續，就是制作逐幀動畫。
steps(n,start/end)
第一個參數 number 為把動畫分為 n 步階段性展示，表示把我們的動畫分成了多少段；
第二個參數默認為 end，設置最后一步的狀態，start 為結束時的狀態，end 為開始時的狀態。
第二個參數具體說就是，emmmm.....................我寄幾也沒詳細看（沒理解），附上傳送門你們看下張鑫旭大神的講解 CSS3 animation屬性中的steps功能符深入介紹
這里只需要第一個參數就好了
這張素材寬高：2128*241、總共為8幀，故 steps(8)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>CSS3 animation屬性中的steps實現GIF動圖(逐幀動畫)</title> 8 <style> 9 .main { 10 margin: 100px auto; 11 width: 266px; 12 height: 241px; 13 background: url(./test.jpg); 14 background-size: 2128px; 15 animation: sprite5 1s steps(8) infinite 16 } 17 18 @keyframes sprite5 { 19 0% { 20 background-position: 0 0 21 } 22 23 100% { 24 background-position: -2128px 0; 25 } 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="main"></div> 32 </html>
ok，大功告成，效果預覽，當然這張GIF來的
👇👇👇👇👇👇👇
