CSS3-Übergänge: Ist "Übergang: Alle" langsamer als "Übergang: x"?

Ich habe eine Frage zur Rendergeschwindigkeit für die Übergangseigenschaft css3.

Angenommen, ich habe eine Reihe von Elementen:

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}

Es ist viel effizienter, alle Übergänge für alle diese Elemente mit einer Deklaration anzuvisieren div, span, a {transition: all}. Meine Frage ist jedoch: Wäre es in Bezug auf die Glätte und Schnelligkeit des Animations-Renderings "schneller", auf die spezifische Übergangseigenschaft jedes Elements abzuzielen? Zum Beispiel:

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}

Meine Logik bei der Frage ist, dass, wenn die CSS- "Engine" nach "allen" Übergangseigenschaften suchen muss, selbst wenn es nur eine einzige Eigenschaft für ein Element gibt, dies die Dinge verlangsamen kann.

Weiß jemand, ob das der Fall ist? Vielen Dank!

Ja, die Verwendung transition: allkann zu erheblichen Leistungseinbußen führen. Es kann viele Fälle geben, in denen der Browser nach einem Übergang sucht, auch wenn der Benutzer ihn nicht sieht, z. B. Farbänderungen, Dimensionsänderungen usw.

Das einfachste Beispiel, das ich mir vorstellen kann, ist das folgende: http://dabblet.com/gist/1657661 - Versuchen Sie, die Zoomstufe oder die Schriftgröße zu ändern, und Sie werden sehen, dass alles animiert wird. Natürlich konnte es keine geben Viele solcher Benutzerinteraktionen, aber es kann einige Änderungen an der Benutzeroberfläche geben, die zu Reflow und Neulackierungen in einigen Blöcken führen können, die den Browser anweisen können, diese Änderungen zu animieren.

Im Allgemeinen wird daher empfohlen, transition: alldie direkten Übergänge nicht zu verwenden und stattdessen zu verwenden.

Es gibt einige andere Dinge, die bei den allÜbergängen schief gehen können , wie das Spritzen der Animation beim Laden der Seite, bei der zuerst die anfänglichen Stile für Blöcke gerendert und dann der Stil mit einer Animation angewendet werden. In vielen Fällen wäre es nicht das, was du willst :)

Ich habe allfür Fälle verwendet, in denen ich mehr als eine Regel animieren musste. Zum Beispiel, wenn ich das color& background-coloron ändern wollte :hover.

Aber es stellt sich heraus , dass Sie mehr als eine Regel für Übergänge ausrichten können, so dass Sie nie brauchen , um die Zuflucht allEinstellung.

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