[問題] css3 animation 停在某一格
簡單的說，
我想利用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
→
12/30 23:44, , 1F
12/30 23:44, 1F
→
12/30 23:45, , 2F
12/30 23:45, 2F
→
12/30 23:46, , 3F
12/30 23:46, 3F
→
12/30 23:46, , 4F
12/30 23:46, 4F
那麼如果我的每個%之間不是均等的，就無法正確分配給每一個影格囉? 囧
→
12/30 23:48, , 5F
12/30 23:48, 5F
→
12/30 23:49, , 6F
12/30 23:49, 6F
這的確是最快的解法，但我想說能不能節省一些圖片的大小這樣>"<
→
12/30 23:59, , 7F
12/30 23:59, 7F
這個網址我這邊一直轉圈圈打不開 Orz
→
12/31 09:12, , 8F
12/31 09:12, 8F
不太了解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
推
01/01 15:22, , 9F
01/01 15:22, 9F
→
01/01 15:23, , 10F
01/01 15:23, 10F
→
01/01 15:24, , 11F
01/01 15:24, 11F
→
01/01 18:18, , 12F
01/01 18:18, 12F
→
01/01 18:19, , 13F
01/01 18:19, 13F
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
