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

smooth animation css

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 segmentar 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 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 al preguntar esto es que si el css "motor" tiene que buscar "todas" las propiedades de transición, incluso si solo hay una sola propiedad para un elemento, puede ralentizar el proceso.

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

Answer 1

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

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

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

Answer 2

Sí, usando la transition: all podrían 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 la verá, como los cambios de color, los cambios de dimensión, etc.

El ejemplo más simple que puedo pensar 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. Por supuesto, no podría haber un muchas de esas interacciones de usuario, pero podría haber algunos cambios en la interfaz que pueden causar el reflujo y el repintado en algunos bloques, que podrían indicarle al navegador que intente y anime esos cambios.

Por lo tanto, en general, se recomienda que no use la transition: all y usaría las transiciones directas en su lugar.

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