Optimización de Animaciones Web con CSS Triggers

Clase 11 de 12 • Curso de Animaciones con CSS

Clase anteriorSiguiente clase

Teniendo en cuenta lo que vimos en la clase de CSS Triggers, te dejo aquí 5 buenas prácticas para optimizar tus animaciones web:

  1. Usa dentro de lo posible propiedades que solo tengan que pasar por el proceso de Composite.
  2. Si necesitas animar alguna propiedad que sea muy costosa (como width, height, left, entre otras), trata de encontrar otra propiedad que sea menos costosa con la que puedas lograr el mismo resultado (o al menos un resultado similar).
  3. Evita animar muchas propiedades al mismo tiempo.
  4. Si necesitas esconder elementos, normalmente se usan las propiedades opacity y visibility en vez de usar la propiedad display (ya que es una propiedad no animable: Propiedades que pueden ser animadas).
  5. Evita hacer animaciones que ocurran al hacer scroll, ya que el evento que escucha el scroll se ejecuta una gran cantidad de veces. Mejor espera a llegar a cierto punto de la pantalla y ahí ejecutas la animación.

¡Cuéntanos si sabes de otras buenas prácticas en los comentarios!