带有步骤的CSS Sprite表格动画

Question

我在制作图像动画时遇到了一些错误。任何人都可以帮助我纠正错误。 Codepen link

<div class="animation"></div>

Answer 1

你必须为每个步骤放一个具有相同宽度和高度的精灵，比如10步，并且在关键帧动画中可以将动画分割10（10％，20％）并且每个关键帧移动到这个着名的精灵宽度。首先制作一个好的精灵;）

演示：https://jsfiddle.net/simurai/CGmCe/

....

-webkit-animation: play .8s steps(10) infinite;
   -moz-animation: play .8s steps(10) infinite;
    -ms-animation: play .8s steps(10) infinite;
     -o-animation: play .8s steps(10) infinite;
        animation: play .8s steps(10) infinite;

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

....