我似乎无法正确设置动画时间
http://codepen.io/anon/pen/ZYMgqE
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
animation: play 1s steps(10) infinite;
}
@keyframes play {
100% { background-position: 0px -2844px; }
}
我尝试了无数组合,但总看起来像是电影胶片。
难道我做错了什么?我是否误解了CSS Sprite动画?
最佳答案
你的数学不对..我想。
图片显然是2844像素高...因此,步数应为高度除以元素高度
2844/36 = 79
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
-webkit-animation: play 1s steps(79) infinite;
animation: play 1s steps(79) infinite;
}
@-webkit-keyframes play {
100% {
background-position: 0px -2844px;
}
}
@keyframes play {
100% {
background-position: 0px -2844px;
}
}
<div class="spinner"></div>
关于css - CSS Sprite动画计时问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28966726/