作者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/cn.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