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

2023年1月25日 118次阅读

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

最佳答案 您可以使用动画计时功能步骤开始或步骤结束来实现此目的.这将确保没有动画平滑并且每帧占用(总动画持续时间/帧),因此在您的情况下为500ms.可以在此处找到此工作的示例：
http://jsfiddle.net/tUa6Y/3/.

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

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

编辑：您可能必须在开始或结束时添加虚拟帧(取决于您是否使用步骤开始与步骤结束),因为第一帧或最后一帧似乎持续时间为0.

点赞