我正在制作一只正在奔跑的猫的定格动画。我已经准备好了所有的幻灯片。但它似乎不能正常工作:
div {
animation: run 1s steps(10) infinite;
-webkit-animation: run 1s steps(10) infinite;
background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0;
background-repeat: no-repeat;
height: 200px;
width: 400px;
}
@keyframes run {
0% {background-position: 100% 0; }
100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {
0% {background-position: 100% 0; }
100% {background-position: 100% -2591px; }
}
<div></div>
最佳答案
实际上您有 13 张幻灯片。所以放steps(13)
div {
animation: run 1s steps(13) infinite;
-webkit-animation: run 1s steps(13) infinite;
background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0;
background-repeat: no-repeat;
height: 200px;
width: 400px;
}
@keyframes run {
0% {background-position: 100% 0; }
100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {
0% {background-position: 100% 0; }
100% {background-position: 100% -2591px; }
}
<div></div>
关于html - 定格动画 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27835008/