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

82

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!

HandiworkNYC.com
fuente
1
Esa ha sido siempre mi teoría también, pero nunca noté ninguna diferencia en la práctica.
ThinkingStiff
3
Esperaría que realizar la animación en pantalla fuera mucho, mucho más caro que analizar CSS. A menos que esté abusando del sistema, no me preocuparía demasiado por eso.
StilesCrisis
Creo que si HAY una diferencia, sería en milisegundos, pero quiero saber si hay una diferencia mínima. gracias por sus comentarios
HandiworkNYC.com
1
Esto me grita "detalles de implementación específicos del proveedor" ...
BoltClock

Respuestas:

73

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 :)

kizu
fuente
enlace está muerto, me hubiera gustado ver su ejemplo
MMachinegun
Corregido el enlace a todo el dabblet
kizu
También me gustaría ver el ejemplo. ¿Quizás ya no existe?
Drazzah
11
Esta no es realmente una respuesta a la pregunta original. Sí, podría cambiar accidentalmente cosas que no tenía la intención de animar, pero OP estaba preguntando si la regla "todos" causa algún impacto en el rendimiento por sí misma, asumiendo que no se activaron transiciones no deseadas.
Owen Masback
30

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;
}
Duncan Mckenna
fuente