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来实现此目的。这将确保没有动画平滑并且每帧占用（总动画持续时间/帧），因此在您的情况下为500ms。可以在此处找到此工作的示例：http://jsfiddle.net/tUa6Y/3/。

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

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

修改：您可能需要在开头或结尾添加虚拟框架（取决于您是否使用step-start vs step-end），因为第一帧或最后一帧似乎持续0秒。

使用CSS的无过渡关键帧

1 个答案: