使用 CSS 的无过渡关键帧答案

【问题标题】：transitionless keyframes with CSS使用 CSS 的无过渡关键帧
【发布时间】：2012-12-21 23:21:18
【问题描述】：

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

【问题讨论】：

你的意思是在状态之间有 500 毫秒的跳跃吗？ @keyframes foo { 0% { 背景位置：0 0; } 49% { 背景位置：0 0; } 50% { 背景位置：0 -10px; } 99%{ 背景位置：0 -10px;} 100% { 背景位置：0 -20px; } }

标签： javascript css css-transitions

【解决方案1】：

您可以使用动画计时功能step-start 或step-end 来实现这一点。这将确保没有动画平滑并且每一帧都需要（总动画持续时间/帧），因此在您的情况下为 500 毫秒。可以在此处找到此工作的示例：http://jsfiddle.net/tUa6Y/3/。

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

编辑：您可能需要在开头或结尾添加一个虚拟帧（取决于您使用的是step-start 还是step-end），因为第一帧或最后一帧似乎被赋予了一个0s的持续时间。

【讨论】：