CSS3 Transiciones: ¿La "transición: todo" es más lenta que la "transición: x"?

Question

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

Supongamos que tengo una serie de 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 para apuntar todas las transiciones para todos aquellos elementos que utilizan una declaración div, span, a {transition: all}. Pero mi pregunta es: ¿sería "más rápido" en términos de la suavidad y rapidez de la representación de la animación para 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 en pedir esto es que si el css "motor" tiene que buscar "todas las" propiedades de transición, incluso si sólo hay una sola propiedad de un elemento, que podría ralentizar las cosas .

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

Answer 1

Sí, usar transition: all podría causar importantes inconvenientes en el rendimiento. Puede haber muchos casos en los que el navegador vería si necesita hacer una transición, incluso si el usuario no lo ve, como los cambios de color, las dimensiones, etc.

El ejemplo más simple en que puedo pensar es esto: http://dabblet.com/gist/1657661 - intente cambiar el nivel de zoom o el tamaño de la fuente y verá que todo se anima. Por supuesto, no podría haber muchas interacciones de este tipo, pero podría haber algunos cambios de interfaz que pueden causar el reflujo y vuelve a pintar en algunos bloques, lo que podría indicarle al navegador que intente animar esos cambios.

Por lo tanto, en general, se recomienda no utilizar el transition: all y utilizar las transiciones directas en su lugar.

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

Answer 2

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

Pero resulta que puede orientar más de una regla para las transiciones, por lo que nunca necesita para recurrir a la configuración all.

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