En esta guía, aprenderás a crear animaciones de CSS de alto rendimiento.
Consulta ¿Por qué algunas animaciones son lentas? para conocer la la teoría detrás de estas recomendaciones.
Compatibilidad del navegador
Todas las propiedades de CSS que se recomiendan en esta guía son adecuadas para varios navegadores. y asistencia.
transform
opacity
will-change
Cómo mover un elemento
Para mover un elemento, usa los valores de palabra clave translate
o rotation
de las
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 elementos. En el siguiente ejemplo, se rota un elemento
360 grados.
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Cómo cambiar el tamaño de un elemento
Para cambiar el tamaño de un elemento, usa el valor de palabra clave scale
del
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 activan el diseño o la pintura
Antes de usar cualquier propiedad de CSS para la animación (que no sea transform
ni opacity
),
determinar 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 nueva capa permite al navegador volver a pintarlos sin necesidad de volver a pintar el resto del diseño.
Por lo general, los navegadores pueden tomar buenas decisiones acerca de los elementos que deben colocarse en una
pero puedes forzar manualmente la creación de capas con la
will-change
.
Como su nombre lo indica, esta propiedad le indica al navegador que este elemento
que se modifique de alguna forma.
En CSS, puedes aplicar will-change
a cualquier selector:
body > .sidebar {
will-change: transform;
}
Sin embargo, la especificación
sugiere que solo debes hacer esto para los elementos que siempre están a punto de
cambio. Por ejemplo, esto podría ser cierto para una barra lateral en la que el usuario puede deslizarse y
y sale de ella. En el caso de los elementos que no cambian con frecuencia, recomendamos aplicar
will-change
con JavaScript cuando es probable que se produzca un cambio Asegúrate de
darle al navegador el tiempo suficiente para realizar las optimizaciones necesarias y eliminar
la propiedad cuando se detenga el cambio.
Si fuerzas la creación de capas en un navegador que no admite will-change
(probablemente Internet Explorer), puedes configurar transform: translateZ(0)
.
Cómo depurar animaciones lentas o con fallas
Las Herramientas para desarrolladores de Chrome y Firefox tienen muchas herramientas para ayudarte a descubrir por qué tus animaciones son lentas o tienen fallas.
Cómo comprobar si una animación activa el diseño
Una animación que mueve un elemento con algo que no es transform
se
puede ser lenta. En el siguiente ejemplo, se compara una animación con transform
.
a una animación con 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 Herramientas para desarrolladores.
Herramientas para desarrolladores de Chrome
- Abre el panel Rendimiento.
- Cómo registrar el rendimiento del tiempo de ejecución mientras se ejecuta la animación.
- Revisa la pestaña Resumen.
Si ves un valor distinto de cero para Renderización en la pestaña Resumen, es posible que significa que tu animación hace que el navegador haga el trabajo de diseño.
![En el panel Resumen, se muestran 37 ms para la renderización y 79 ms para la pintura.](https://web.dev/static/articles/animations-guide/image/the-summary-panel-shows-3-d8a0efc73229b.jpg?authuser=3&hl=es-419)
![En el panel Resumen, se muestran valores cero para el procesamiento y la pintura.](https://web.dev/static/articles/animations-guide/image/the-summary-panel-show-ze-6036893c491f8.jpg?authuser=3&hl=es-419)
Herramientas para desarrolladores de Firefox
En las Herramientas para desarrolladores de Firefox, usa la herramienta Waterfall puede ayudarte a comprender en qué momento pasa el tiempo el navegador.
- Abre el panel Rendimiento.
- Comienza a registrar el rendimiento mientras se reproduce la animación.
- Detén la grabación y, luego, inspecciona la pestaña Waterfall.
Si ves entradas para Recalculate Style, haz lo siguiente: significa que el navegador debe volver 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 del Medidor 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 FPS.
Esto muestra valores como 50% 1 (938 m) dropped of 1878
. Un modelo de alto rendimiento
la animación tiene un porcentaje alto, como 99%
, lo que significa que se quedan pocos fotogramas
y la animación se ve fluida.
![El medidor de FPS muestra que se perdió el 50% de los fotogramas](https://web.dev/static/articles/animations-guide/image/the-fps-meter-shows-50-e279493d08c47.jpg?authuser=3&hl=es-419)
![El medidor de FPS muestra que solo el 1% de los fotogramas se perdieron](https://web.dev/static/articles/animations-guide/image/the-fps-meter-shows-1-97f98fe03092a.jpg?authuser=3&hl=es-419)
Cómo comprobar si una animación activa la función de pintura
Algunas propiedades son más costosas que otras para que el navegador pinte. Para Por ejemplo, cualquier elemento que incluya un desenfoque (como una sombra, por ejemplo) toma más tiempo pintar que dibujar un cuadro rojo. Estas diferencias no siempre son obvias en el CSS, pero las Herramientas para desarrolladores del navegador pueden ayudarte a identificar las áreas que 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 Pintura de pantalla.
- Mueve el puntero por la pantalla.
![Un elemento de la IU destacado en verde para demostrar que se volverá a pintar](https://web.dev/static/articles/animations-guide/image/a-ui-element-highlighted-43b56111254fb.jpg?authuser=3&hl=es-419)
Si ves toda la pantalla intermitente o áreas destacadas que no crees debería 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 en las Herramientas para desarrolladores de Chrome puede ayudarte.
Herramientas para desarrolladores de Firefox
- Abre Configuración y agrega un botón de la Caja de herramientas para Activa o desactiva el destello de la pintura.
- En la página que quieras 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
animaciones en la etapa de composición de la ruta de acceso. Usa las Herramientas para desarrolladores para verificarlo
qué etapa de la ruta se ve afectada por tus animaciones.
Usa el generador de perfiles de pintura para ver si alguna de estas operaciones es particularmente útil. costoso. Si encuentras algo, verifica si otra propiedad de CSS ofrece la misma apariencia y con un mejor rendimiento.
Usa la propiedad will-change
con moderación y solo si encuentras un problema de rendimiento.