Propiedades CSS óptimas para animaciones eficientes
Propiedades recomendadas y no recomendadas para animar
Al hacer animaciones debemos fijarnos que no sean demasiado costosas computacionalmente para que no parezcan inestables y poco fluidas.
Para ello, debemos comprender un concepto clave llamado: el proceso de renderizado.
Resulta que, como el navegador no entiende el código que hacemos, debe hacer una transformación de ese código para que finalmente pueda ser entendido y visualizado en la pantalla.
Esa transformación se hace en una serie de pasos como los que puedes ver a continuación:
Sin embargo, los pasos que nos interesan en este momento son los últimos 3: Layout, Paint y Composite. Cada uno cumple un papel muy importante, pero no todas las propiedades pasan por estos 3 procesos.
Si una propiedad debe pasar por el paso de Layout, obligatoriamente debe pasar por Paint y Composite también. Si una propiedad debe pasar por el paso de Paint, obligatoriamente debe pasar por Composite también. Pero, si una propiedad debe pasar por el paso de Composite, no debe pasar por ningún otro paso.
Con lo anterior, podemos darnos cuenta de que hay propiedades que requieren un costo mayor que otras al tener que pasar por más pasos. Puedes revisar el proceso de renderizado que realiza cada propiedad en esta página: https://csstriggers.com/. Revisemos algunas de ellas:
Propiedad height: En cada uno de los motores de renderizado, podemos darnos cuenta por la imagen de abajo que requiere de los pasos de Layout, Paint y Composite, lo cual es bastante costoso.
Propiedad background-color: Es una propiedad que no afecta el diseño (Layout) pero requiere una nueva capa de pintura (Paint), lo cual la hace una propiedad también costosa.
Propiedades transform y opacity: Estas dos propiedades sólo requieren del paso de Composite, lo cual las hace muy baratas de animar. Si necesitas modificar propiedades como width y left (propiedades costosas), puedes reemplazarlas usando la propiedad transform para tratar de lograr el mismo efecto.
Finalmente, si sabemos por cuáles pasos de renderizado pasa cada una de las propiedades, sabremos con exactitud cuáles propiedades son más costosas y menos recomendadas para animar (como height, width y background-color), como también, cuáles propiedades son menos costosas y más recomendadas para animar (como transform y opacity).
Hay una extension para vscode de csstriggers que sirve mucho para estos casos.
Mover algo cambiando left/top/etc es una mala practica, por eso es muy útil utilizar el translate. Es solo un ejemplo de que propiedades animar/transicionar
cual es?
Vaya, yo solía animar la propiedad position para menús laterales. Lo mejor será usar translate().
Otra buena propiedad que se puede utilizar y con la cual se pueden obtener muy buenos efectos es clip-path
Les comparto su documentación
¡Wow! sorprendente el proyecto quantum css de Mozilla, ahora tengo ganas de aprender rust
Creo que hay una contradiccion en la lectura, Se menciona que transform & opacity solo pasan por la etapa de composite, Si bien en el caso de transform es cierto , pero opacity en la misma imagen adjunta , dice que si ocasiona un Paint y luego ya pasa por el Composite
"But since is a visual property, it will cause a painting to occur"
Tambien he escuchado mencionar esto antes , Investigando un poco mas , Enconre esta respuesta donde se menciona que efectivamente causa un re-paint pero cuando se le cambia la
opacidad a cero el navegador lo ignora y salta al siguiente paso,
Alguien podria aclararlo ?
Hola Nilson ! Gracias por tu excelente pregunta. Este caso es algo especial, precisamente porque en general los motores de renderizado trabajan de la misma forma, pero algunos, hacen que una propiedad pase por 1 o más pasos, como en este caso. Adicional a esto, lo que se menciona en CSS Triggers es precisamente que esta propiedad al "pintar", debe sí o sí tener que pasar por el proceso de pintado, pero, el caso que mencionas es bastante interesante porque, qué sucede si queremos pasar de opacity: 1; a opacity: 0; ? Debemos pintar ? Esto también sucede con la propiedad visibility y, podríamos decir que, en efecto, el motor de renderizado analiza si debe pintar o no, y dependiendo de eso, hace ese proceso o lo ignora.
Muchas gracias por la respuesta profe ! Ahora me quedo mucho mas claro :3
en la página csstriggers veo que representan cada paso de propiedad con los siguientes colores.
++todo bien hasta ahí. Pero lo que no entiendo es a que se refieren con BGWE.++
!80
tampoco me queda claro, ayuda!! :v
BGWE => Blink Gecko) WebKit EdgeHTML. Son motores de renderizado, el más popular es Blink.
esta genial esta pagina y los comentarios gracias!
Resumen:
Para hacer animaciones eficientes, debemos evitar propiedades que sean costosas computacionalmente y utilizar aquellas que son más económicas. El proceso de renderizado en los navegadores consta de varios pasos, pero los más importantes son Layout, Paint y Composite. Algunas propiedades requieren pasar por más pasos, lo que las hace más costosas de animar, como height, width y background-color. En cambio, propiedades como transform y opacity son más baratas de animar ya que solo requieren del paso de Composite.
Lo que esntiendo es que:
Width se puede reemplazar por transform: scaleX()
Height se puede reemplazar por transform: scaleY()
¿Background-color como se reemplazaría?
¡Hola!
Background color no tiene un semejante, para cambiar el color tienes que modificar ese background color.
El primer paso javascript entiendo es todo lo referente a javascript por lo que un cambio de alguna propiedad utilizando javascript utilizarái muchos más recursos que usando css directamente, por ejemplo si se quiere cambiar el color de un elemento hace tiempo utilizabamos javascript pero ahora usando por ejemplo el :hover, resulta en muchos menos recursos.... lo he entendido bien, sería así?
no entiendo :( a que se refiere con costoso?
Costosas computacionalmente, es decir, que no consuman muchos recursos de nuestra computadora, porque algunas animaciones pueden consumir más o menos recursos, y recuerda que no todos tienen computadoras tan buenas para correr esas animaciones :D
Esta interesante la lectura recomendada, tocaría buscar si al final se aplico el quantum css a Fire Fox.
¡Maquina de CSS de Mozilla está escrita con Rust! También algunas blockchain 0.0 por la eficiencia de procesos y de memoria, que noticia, no me lo esperaba.
Me encanto esta info... muy buenos tips para mejorar el performance. Gracias!!!
