[解決済み] CSS3のトランジション。transition: all" は "transition: x" よりも遅い？

質問

css3のtransitionプロパティのレンダリング速度について質問です。

要素がいくつもあるとします。

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

これらの要素のすべての遷移を1つの宣言でターゲットにする方が、はるかに効率的です。 div, span, a {transition: all} . しかし、私の質問は、各要素の特定の遷移プロパティをターゲットにすることは、アニメーションのレンダリングの滑らかさと速さの点で、"速い" なのでしょうか？たとえば

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

これを尋ねる私の論理は、要素に 1 つのプロパティしかない場合でも、CSS "engine" がすべての遷移プロパティを検索しなければならない場合、物事を遅くする可能性があるということです。

そのようなことがあるかどうか、どなたかご存知でしょうか。ありがとうございます。

どのように解決するのですか？

そうです。 transition: all を使用すると、パフォーマンスで大きな欠点が生じる可能性があります。色の変更、寸法の変更など、ユーザーが見ていなくても、ブラウザが遷移が必要であるかどうかを確認する多くの場合があります。

私が思いつく最も単純な例は、次のようなものです。 http://dabblet.com/gist/1657661 - もちろん、このようなユーザー インタラクションは多くありませんが、いくつかのブロックにリフローや再描画を引き起こすようなインターフェースの変更があり、その変更をアニメーション化するようにブラウザに指示することができます。

そのため、一般的には transition: all を使用せず、直接遷移を使用することをお勧めします。

には、他にもうまくいかないことがあります。 all トランジションでうまくいかないことがあります。たとえば、ページロード時のアニメーションのスプラッシュでは、まずブロックの初期スタイルをレンダリングし、次にアニメーションを伴うスタイルを適用します。多くの場合、それはあなたが望むものではありません:)