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 transition 会利用计时功能。有没有办法使用 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-start 还是 step-end)，因为第一帧或最后一帧的持续时间似乎为 0。