4

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 の動作を再現する方法はありますか?

4

1 に答える 1

2

これは、アニメーション タイミング機能step-startまたはを使用して実現できstep-endます。これにより、アニメーションのスムージングがなくなり、各フレームに (合計アニメーション時間/フレーム) がかかるため、この場合は 500ms になります。この動作の例は、http: //jsfiddle.net/tUa6Y/3/にあります。

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

詳細については、 https://developer.mozilla.org/en-US/docs/CSS/timing-functionを参照してください。

編集:最初または最後のフレームに 0 の期間が与えられているように見えるため、 ( step-startvsを使用するかどうかに応じて) 開始または終了にダミー フレームを追加する必要がある場合があります。step-end

于 2012-12-21T14:19:05.310 に答える