Cómo crear animaciones CSS de alto rendimiento

Kayce Basques

Rachel Andrew

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.

• Antes.
• Después.

Herramientas para desarrolladores de Chrome

1. Abre el panel Rendimiento.
2. Cómo registrar el rendimiento del tiempo de ejecución mientras se ejecuta la animación.
3. 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.

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.

1. Abre el panel Rendimiento.
2. Comienza a registrar el rendimiento mientras se reproduce la animación.
3. 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

1. Abre la pestaña Renderización en las Herramientas para desarrolladores de Chrome.
2. Habilita la casilla de verificación del Medidor FPS.
3. 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.

.

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

1. Abre la pestaña Renderización en las Herramientas para desarrolladores de Chrome.
2. Selecciona Pintura de pantalla.
3. Mueve el puntero por la pantalla.

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

1. Abre Configuración y agrega un botón de la Caja de herramientas para Activa o desactiva el destello de la pintura.
2. 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.