在 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 行为?
最佳答案
您可以使用动画计时函数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。
关于javascript - 使用 CSS 的无过渡关键帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13991506/