與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關鍵幀

回答

相關問題