En esta guía, se explica cómo crear animaciones CSS de alto rendimiento.
Consulta ¿Por qué algunas animaciones son lentas? para conocer la teoría detrás de estas recomendaciones.
Compatibilidad del navegador
Todas las propiedades de CSS que se recomiendan en esta guía son compatibles con varios navegadores.
transform
opacity
will-change
Cómo mover un elemento
Para mover un elemento, usa los valores de palabra clave translate
o rotation
de la propiedad transform
.
Por ejemplo, para deslizar un elemento a la vista, usa translate
.
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
Usa rotate
para rotar los elementos. En el siguiente ejemplo, se rota un elemento en 360 grados.
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Cambia el tamaño de un elemento
Para cambiar el tamaño de un elemento, usa el valor de palabra clave scale
de la propiedad transform
.
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
Cambia la visibilidad de un elemento
Para ocultar o mostrar un elemento, usa opacity
.
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Evita las propiedades que activen el diseño o la pintura
Antes de usar cualquier propiedad de CSS para la animación (que no sea transform
ni opacity
), determina el impacto de la propiedad en la canalización de renderización.
Evita cualquier propiedad que active diseño o pintura, a menos que sea absolutamente necesario.
Forzar la creación de capas
Como se explica en ¿Por qué algunas animaciones son lentas?, colocar elementos en una capa nueva permite que el navegador vuelva a pintarlos sin necesidad de volver a pintar el resto del diseño.
Por lo general, los navegadores pueden tomar buenas decisiones sobre qué elementos se deben colocar en una capa nueva, pero puedes forzar manualmente la creación de capas con la propiedad will-change
.
Como su nombre lo sugiere, esta propiedad le indica al navegador que este elemento se modificará de alguna manera.
En CSS, puedes aplicar will-change
a cualquier selector:
body > .sidebar {
will-change: transform;
}
Sin embargo, la especificación sugiere que solo deberías hacer esto para los elementos que siempre están a punto de cambiar. Por ejemplo, esto podría ser el caso de una barra lateral en la que el usuario puede deslizarse hacia adentro y afuera. En el caso de los elementos que no cambian con frecuencia, te recomendamos que apliques will-change
con JavaScript cuando sea probable que se produzca un cambio. Asegúrate de darle al navegador el tiempo suficiente para realizar las optimizaciones necesarias y quita la propiedad cuando se detenga el cambio.
Si quieres forzar la creación de capas en un navegador que no admite will-change
(lo más probable es que sea Internet Explorer), puedes configurar transform: translateZ(0)
.
Cómo depurar animaciones lentas o con fallas
Las Herramientas para desarrolladores de Chrome y las Herramientas para desarrolladores de Firefox tienen muchas herramientas que te ayudan a determinar por qué las animaciones son lentas o tienen fallas.
Cómo comprobar si una animación activa un diseño
Es probable que una animación que mueve un elemento con otro elemento que no sea transform
sea lenta. En el siguiente ejemplo, se compara una animación que usa transform
con una que usa top
y left
.
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
Puedes probar esto en los siguientes dos ejemplos de Glitch y explorar el rendimiento con las Herramientas para desarrolladores.
Herramientas para desarrolladores de Chrome
- Abre el panel Rendimiento.
- Registra el rendimiento del tiempo de ejecución mientras se realiza la animación.
- Inspecciona la pestaña Summary.
Si ves un valor distinto de cero para Renderización en la pestaña Resumen, podría significar que tu animación está haciendo que el navegador haga trabajo de diseño.
Herramientas para desarrolladores de Firefox
En las herramientas para desarrolladores de Firefox, la Waterfall puede ayudarte a comprender en qué parte del tiempo pasa el navegador.
- Abre el panel Rendimiento.
- Comienza a grabar el rendimiento mientras se reproduce la animación.
- Detén la grabación y, luego, inspecciona la pestaña Waterfall.
Si ves entradas para Volver a calcular el estilo, significa que el navegador debe regresar al inicio de la cascada de renderización para renderizar la animación.
Cómo comprobar si hay fotogramas descartados
- Abre la pestaña Renderización en las Herramientas para desarrolladores de Chrome.
- Habilita la casilla de verificación Medidor de FPS.
- Observa los valores mientras se ejecuta la animación.
Presta atención a la etiqueta Fotogramas en la parte superior de la IU del Medidor de FPS.
Se muestran valores como 50% 1 (938 m) dropped of 1878
. Una animación de alto rendimiento tiene un porcentaje alto, como 99%
, lo que significa que se descartan pocos fotogramas y la animación se ve fluida.
Cómo comprobar si una animación activa la pintura
Algunas propiedades son más costosas para el navegador que otras. Por ejemplo, todo lo que incluya un desenfoque (como una sombra) tarda más en pintar que dibujar un cuadro rojo. Estas diferencias no siempre son evidentes en CSS, pero las Herramientas para desarrolladores del navegador pueden ayudarte a identificar qué áreas debes volver a pintar, así como otros problemas de rendimiento relacionados con la pintura.
Herramientas para desarrolladores de Chrome
- Abre la pestaña Renderización en las Herramientas para desarrolladores de Chrome.
- Selecciona Paint Flashing.
- Mueve el puntero por la pantalla.
Si ves toda la pantalla intermitente o áreas destacadas que crees que no deberían cambiar, investiga más a fondo.
Si necesitas determinar si una propiedad en particular está causando problemas de rendimiento relacionados con la pintura, el generador de perfiles de pintura de las Herramientas para desarrolladores de Chrome puede ayudarte.
Herramientas para desarrolladores de Firefox
- Abre Configuración y agrega un botón de Caja de herramientas para Toggle paint flashing.
- En la página que deseas inspeccionar, activa el botón y mueve el mouse o desplázate para ver las áreas destacadas.
Conclusión
Cuando sea posible, restringe las animaciones a opacity
y transform
para mantenerlas en la etapa de composición de la ruta de renderización. Usa las Herramientas para desarrolladores para verificar qué etapa de la ruta se ve afectada por tus animaciones.
Usa el generador de perfiles de pintura para ver si alguna operación de pintura es particularmente costosa. En ese caso, verifica si otra propiedad de CSS tiene el mismo aspecto y mejor rendimiento.
Usa la propiedad will-change
con moderación y solo si tienes problemas de rendimiento.