web-dev-qa-db-ja.com

CSS3トランジション：「transition：all」は「transition：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}

これを尋ねる私のロジックは、CSS「エンジン」が要素のたった1つのプロパティがある場合でも「すべて」の遷移プロパティを検索しなければならない場合、物事が遅くなる可能性があるということです。

それが当てはまるかどうか誰もが知っていますか？ありがとう！

cssperformancecss3css-transitions
71
j-man86

はい。transition: allを使用すると、パフォーマンスが大幅に低下する可能性があります。色の変化、寸法の変化など、ユーザーが見えなくても、ブラウザが遷移を行う必要があるかどうかを調べるケースが多くあります。

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

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

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

62
kizu

複数のルールをアニメーション化する必要がある場合に、allを使用しています。たとえば、colorとbackground-colorの:hoverを変更したい場合。

しかし、遷移に対して複数のルールをターゲットにできるため、needをall設定に頼ることはありません。

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