[解決済み] CSS アニメーション vs. トランジション

質問

ということで、CSS3 の両方を実行する方法は理解できました。 トランジション と アニメーション . ググってみてもよくわからないのは、いつどれを使うかです。

例えば、ボールを跳ねさせたい場合、アニメーションが有効なのは明らかです。私がキーフレームを提供すれば、ブラウザが中間フレームを作成し、素敵なアニメーションが出来上がります。

しかし、どちらを使っても同じ効果が得られる場合があります。例えば、facebookスタイルのスライド式ドロワーメニューを実装するのが一般的な例です。

この効果は、次のようなトランジションで実現できます。

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

あるいは、こんな風にアニメーションで。

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}
 
@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

このようなHTMLでは、次のようになります。

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

そして、この付属のjQueryスクリプト。

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

私が理解したいのは、これらのアプローチの長所と短所です。

1. 明らかな違いとして、アニメーション化することでより多くのコードが必要になることが挙げられます。
2. アニメーションはより柔軟性があります。スライドアウトとスライドインに異なるアニメーションを設定することができます。
3. パフォーマンスについて言えることはありますか？どちらもH/Wアクセラレーションを活用しているのでしょうか？
4. どちらがより現代的で、今後の方向性なのか
5. その他に付け加えることはありますか？

解決方法は？

やり方は把握できているようだが、いつやるかはわからない。

遷移 はアニメーション は、2つの異なる状態、つまり、開始状態と終了状態の間で実行されるものだけです。ドロワーメニューのように、開始状態が開いていて終了状態が閉じていることもあれば、その逆もあり得ます。

というものを実行したい場合 はしません。 特に、開始状態と終了状態を伴う場合、またはトランジションのキーフレームをより細かく制御する必要がある場合は、アニメーションを使用する必要があります。