javascript - 使用 CSS 的无过渡关键帧

Question

在 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 行为？

Answer 1

您可以使用动画计时功能step-start或step-end. 这将确保没有动画平滑并且每一帧都需要（总动画持续时间/帧），因此在您的情况下为 500 毫秒。可以在此处找到此工作的示例：http: //jsfiddle.net/tUa6Y/3/。

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

有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/CSS/timing-function。

编辑：您可能必须在开头或结尾添加一个虚拟帧（取决于您是否使用step-startvs step-end），因为第一帧或最后一帧的持续时间似乎为 0。