[問題] css3 animation 停在某一格

[oj113068 (橘子汁)]

簡單的說，
我想利用css3做逐格動畫
圖片實際格數有20格
但我希望他能在第13格停留6格的時間，所以總共是25格的播放時間

一格的寬度是113px，總長度是2260 (以左上角座標是2147)
將100%分配給25格的話，每單位是4%，

一開始我的動畫是這樣寫的 (我把每step都給他一秒方便觀察)


 #sprite {
            width: 113px;
            height: 150px;
            background: url(images/cafe_05/caf_05_somke-3.png) 0 0;
            animation: play 25s steps(25) infinite;
}


@keyframes play {

          0%{ background-position:0px 0;}
         52%{ background-position:-1356px 0;}
         72%{ background-position:-11356px 0;}
        100%{ background-position:-2147px 0;}

}

但是，這樣寫沒有達成我要的效果，我做了一些實驗發現

我頂多只能改成

 #sprite {
            width: 113px;
            height: 150px;
            background: url(images/cafe_05/caf_05_somke-3.png) 0 0;
            animation: play 12s steps(12) infinite;
}


@keyframes play {

          0%{ background-position:0px 0;}
         52%{ background-position:-1356px 0;}
         72%{ background-position:-11356px 0;}

}

他會在我要的第13格停留，
然後就會逆向播放回去(這一點很奇怪，預設的animation-direction:normal應該是不
會反向播放才對)

如果我keyframes寫到100%{ background-position:-2147px 0;}
steps改成steps(25)，
他播放的順序就完全不會停留了，而是用滑動的

不知道是否有板友知道應該如何修改才能達成我要的效果？

附上測試網址
http://sheepy.tw/test/cafe/05-test.html

希望能有解答 >"< ，感謝



--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.117.3.144
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1483094150.A.709.html
→ miau: steps 給的參數是表示兩個 keyframes 之間的 steps 數
→ miau: 而不是整個動畫中的 step 數，也就是說你要是給 step(3)
→ miau: 然後 keyframes 裡又有 0% 50% 100% 的話這整段動畫會有
→ miau: 6個 steps （第二行少打一個s抱歉）
   那麼如果我的每個%之間不是均等的，就無法正確分配給每一個影格囉? 囧

→ miau: 以你的材料和需求一時想不出什麼簡單的解法 XD
→ miau: 直接把第13格要暫停的部份塞進圖裡面然後改成25格應該最快吧
   這的確是最快的解法，但我想說能不能節省一些圖片的大小這樣>"<

→ hoshinohane: https://goo.gl/l6eQfj
   這個網址我這邊一直轉圈圈打不開 Orz

→ hoshinohane: 寫錯了，96%是-2147，13格再多一秒
   不太了解H大的意思，意思是寫成這樣嗎？


      @keyframes play {
                  0%{ background-position:0px 0;}
                 52%{ background-position:-1356px 0;}
                72%{ background-position:-1356px 0;}
                96%{ background-position:-2147px 0;}
        }


但是好像沒有用(可能我會錯意)
而且沒寫到100%他好像都會倒著播放回去耶 >"< 奇怪
※ 編輯: oj113068 (122.117.3.144), 01/01/2017 14:48:49
推 miau: 上面h大的寫法是把steps設成1（就是每個keyframe之間無漸變
→ miau: 然後每一格都寫一次，就是0% 4% 8% 12%...到100%
→ miau: 25格每格都指定位置就能達到你的需求
→ oj113068: 原來如此 QQ 看來只有一行一行寫或是把圖塞進去兩種暴力
→ oj113068: 破解法了...QQ