与CSS transitionless关键帧

在JavaScript中，这也可以写成这样：与CSS transitionless关键帧

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

来源

2012-12-21 Gajus

你是否会在状态之间跳跃500ms？ @keyframes foo {0％{background-position：0 0; } 49％{background-position：0 0; } 50％{background-position：0 -10px; } 99％{background-position：0 -10px;} 100％{background-position：0 -20px; }} –

您可以使用动画定时功能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 VS step-end）似乎被赋予0的持续时间。

来源

2012-12-21 14:19:05

与CSS transitionless关键帧

回答

相关问题