作者oj113068 (橘子汁)
看板Web_Design
標題[問題] css3 animation 停在某一格
時間Fri Dec 30 18:35:46 2016
簡單的說，
我想利用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://webptt.com/m.aspx?n=bbs/Web_Design/M.1483094150.A.709.html
1F：→ miau: steps 給的參數是表示兩個 keyframes 之間的 steps 數 12/30 23:44
2F：→ miau: 而不是整個動畫中的 step 數，也就是說你要是給 step(3) 12/30 23:45
3F：→ miau: 然後 keyframes 裡又有 0% 50% 100% 的話這整段動畫會有 12/30 23:46
4F：→ miau: 6個 steps （第二行少打一個s抱歉） 12/30 23:46
那麼如果我的每個%之間不是均等的，就無法正確分配給每一個影格囉? 囧
5F：→ miau: 以你的材料和需求一時想不出什麼簡單的解法 XD 12/30 23:48
6F：→ miau: 直接把第13格要暫停的部份塞進圖裡面然後改成25格應該最快吧 12/30 23:49
這的確是最快的解法，但我想說能不能節省一些圖片的大小這樣>"<
這個網址我這邊一直轉圈圈打不開 Orz
8F：→ hoshinohane: 寫錯了，96%是-2147，13格再多一秒 12/31 09:12
不太了解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
9F：推 miau: 上面h大的寫法是把steps設成1（就是每個keyframe之間無漸變 01/01 15:22
10F：→ miau: 然後每一格都寫一次，就是0% 4% 8% 12%...到100% 01/01 15:23
11F：→ miau: 25格每格都指定位置就能達到你的需求 01/01 15:24
12F：→ oj113068: 原來如此 QQ 看來只有一行一行寫或是把圖塞進去兩種暴力 01/01 18:18
13F：→ oj113068: 破解法了...QQ 01/01 18:19