Javascript 带有CSS的无过渡关键帧

在JavaScript中，可以这样编写：

var state = 0;
setTimeout(function keyFrames () {
    fooElement.style.backgroundPosition = '0 -' + (10*state++) + 'px';
    if (state === 2) {
        state = 0;
    }
    setTimeout(keyFrames, 500);
}, 500);

CSS3关键帧提供了非常类似的功能：

@keyframes foo { 0% { background-position: 0 0; } 50% { background-position: 0 -10px; } 100% { background-position: 0 -20px; } }
#fooElement { transition: foo 1500ms linear infinite; }

---

区别在于CSS转换将使用计时功能。有没有一种方法可以使用CSS复制准确的JavaScript行为？

您可以使用动画计时功能

步骤开始

或

步骤结束

来实现这一点。这将确保没有动画平滑，并且每个帧都需要（总动画持续时间/帧），因此在您的情况下为500毫秒。可在此处找到此工作的示例：

有关更多信息，请参阅

---

编辑：由于第一帧或最后一帧的持续时间似乎为0，您可能必须在开始或结束添加一个虚拟帧（取决于您使用的是

步骤开始

还是

步骤结束

）。

是否在两个状态之间跳跃500毫秒@关键帧foo{0%{背景位置：0 0；}49%{背景位置：0 0；}50%{背景位置：0-10px；}99%{背景位置：0-10px；}100%{背景位置：0-20px；}

#fooElement { transition: foo 1500ms step-start infinite; }