CSS3トランジション：「トランジション：すべて」は「トランジション：x」よりも遅いですか？

css3遷移プロパティのレンダリング速度について質問があります。

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

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の「エンジン」が「すべての」遷移プロパティを検索する必要がある場合、処理速度が低下する可能性があるということです。

それが事実かどうか誰かが知っていますか？ありがとう！

はい、使用transition: allするとパフォーマンスに大きな欠点が生じる可能性があります。色の変更や寸法の変更など、ユーザーに表示されなくても、遷移が必要な場合にブラウザが表示される場合が多くあります。

私が考えることができる最も簡単な例はこれです：http：//dabblet.com/gist/1657661 —ズームレベルまたはフォントのサイズを変更しようとすると、すべてがアニメーション化されることがわかります。もちろん、あり得ませんでした。このようなユーザーインタラクションはたくさんありますが、一部のブロックでリフローと再描画を引き起こす可能性のあるインターフェイスの変更があり、ブラウザにそれらの変更を試してアニメーション化するように指示する可能性があります。

したがって、一般的にはtransition: all、を使用せず、代わりに直接遷移を使用することをお勧めします。

allページの読み込み時にアニメーションがスプラッシュするなど、トランジションで問題が発生する可能性のあるものが他にもいくつかあります。最初にブロックの初期スタイルをレンダリングしてから、アニメーションでスタイルを適用します。多くの場合、それはあなたが望むものではないでしょう:)

私はall、複数のルールをアニメートする必要がある場合に使用してきました。例えば、私が変更したい場合はcolor＆background-colorで:hover。

ただし、トランジションには複数のルールをターゲットにできるため、設定に頼る必要はありませんall。

.nav a {
  transition: color .2s, text-shadow .2s;
}