Question

我无法弄清楚为什么我的精灵像老电影一样动画而不是将背景位置从一个地方改变到另一个地方。它从左到右平滑滚动，这是有道理的，因为我要求位置从左到右改变，但是因为我使用steps（），它不应该从一个图像跳到下一个图像？请帮助弄清楚我做错了什么：

#sprite {
background: url('img/example.png') no-repeat -4px -5px;
width: 43px;
height: 82px;

  -webkit-animation: dance .5s steps(4) infinite;
        animation: dance .5s steps(4) infinite;
}

@-webkit-keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

@keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

我真的很难搞清楚，而且我很难解释，所以我想也许我可以制作一个JSFiddle，以显示我的版本与the example中的动画效果的区别。

JS Fiddle

我非常感谢您提供的任何帮助。如果我能提供任何其他信息以帮助解决这个问题，请告诉我。

谢谢！

Answer 1

当您设置具有多个关键帧的动画时，计时功能（在本例中为步骤）适用于一个关键帧与下一个关键帧之间的过渡。

所以，即使看起来很奇怪，CSS应该是

#ryu {
    -webkit-animation: dance 8s steps(1) infinite;
    animation: dance 8s steps(1) infinite;
}

即只有一步

fiddle

为什么我的css精灵看起来像一部老电影？

1 个答案: