Transiciones CSS3: ¿Es "transición: todas" más lento que "transición: x"?

Tengo una pregunta sobre la velocidad de renderizado de la propiedad de transición css3.

Supongamos que tengo varios elementos:

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 mucho más eficiente apuntar a todas las transiciones para todos esos elementos usando una declaración div, span, a {transition: all}. Pero mi pregunta es: ¿sería "más rápido" en términos de suavidad y rapidez de la representación de la animación apuntar a la propiedad de transición específica de cada elemento? Por ejemplo:

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}

Mi lógica al preguntar esto es que si el "motor" de CSS tiene que buscar "todas" las propiedades de transición, incluso si hay una sola propiedad para un elemento, eso podría ralentizar las cosas.

¿Alguien sabe si ese es el caso? ¡Gracias!

Sí, el uso transition: allpodría causar importantes inconvenientes en el rendimiento. Puede haber muchos casos en los que el navegador buscaría si necesita hacer una transición, incluso si el usuario no lo verá, como cambios de color, cambios de dimensión, etc.

El ejemplo más simple que se me ocurre es el siguiente: http://dabblet.com/gist/1657661 : intente cambiar el nivel de zoom o el tamaño de la fuente y verá que todo se anima. muchas de estas interacciones de usuario, pero podría haber algunos cambios en la interfaz que pueden causar el reflujo y repintados en algunos bloques, que podrían indicarle al navegador que intente animar esos cambios.

Por lo tanto, en general, se recomienda que no use transition: ally use las transiciones directas en su lugar.

Hay algunas otras cosas que pueden salir mal con las alltransiciones, como el toque de animación en la carga de la página, donde al principio representaría los estilos iniciales para los bloques y luego aplicaría el estilo con una animación. En muchos casos, no sería lo que desea :)

Lo he estado usando allpara casos en los que necesitaba animar más de una regla. Por ejemplo, si quisiera cambiar el color& background-coloron :hover.

Pero resulta que puede apuntar a más de una regla para las transiciones, por lo que nunca tendrá que recurrir a la allconfiguración.

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