带步骤的 CSS Sprite 表动画

【问题标题】：CSS Sprite sheet animation with steps带步骤的 CSS Sprite 表动画
【发布时间】：2017-04-25 18:05:23
【问题描述】：

我在为图像设置动画时犯了一些错误。任何人都可以帮助我纠正它。 Codepen link

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

【问题讨论】：

找不到codepen页面
对不起，这里是链接codepen.io/SantoshNeela/pen/QvEvPJ
mmmh，这种方法不正确..
你必须在每一步放置一个具有相同宽度和高度的精灵，比如 10 步，并且在你的关键帧动画中可以将动画分割为 10 (10%,20%) 并且每个关键帧移动到这个著名的精灵宽度。从制作一个好的精灵开始；）
好的，谢谢。我会用一些合适的精灵来做的。

标签： css css-animations

【解决方案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; }
}

....

【讨论】：