CSS

Herramienta :

Es el lenguaje que da estilo y vida a la web, controlando desde los colores hasta el layout. Su verdadero poder para los animadores se desata con las transiciones, transformaciones y keyframes, permitiendo orquestar movimientos fluidos, efectos de parallax y coreografías visuales directamente en el navegador. Aquí exploramos cómo usar CSS para crear desde sutiles micro-interacciones hasta motion graphics para la web.

1. ¿Cuándo debo usar animaciones CSS en lugar de JavaScript o un video GIF?

La regla general se basa en el propósito y la complejidad. Usa animaciones CSS para transiciones de estado de la interfaz (como un botón que cambia de color al pasar el cursor), micro-interacciones y animaciones simples que no necesitan controles complejos de reproducción. Usa JavaScript (con librerías como GSAP) cuando necesites una coreografía avanzada, controlar la línea de tiempo (pausar, revertir, etc.) o basar la animación en la interacción del usuario (como seguir el scroll). Usa un GIF o un video corto solo para animaciones de «stock» o cinemáticas donde la interactividad y la optimización no son la prioridad, ya que su peso en Kbytes es mucho mayor.

2. ¿Animar con CSS afecta el rendimiento de mi web? ¿Qué propiedades son seguras para animar?

Sí, puede afectar el rendimiento si no se hace correctamente. Para animaciones fluidas que no sobrecarguen el navegador, la práctica recomendada es animar únicamente dos propiedades: transform (para mover, rotar o escalar) y opacity (para cambiar la visibilidad). El navegador puede procesar los cambios en estas dos propiedades directamente en la GPU (aceleración por hardware), lo que evita recalcular el layout de la página y garantiza una animación suave. Animar propiedades como width, height, margin o top/left es mucho menos eficiente y puede causar saltos o «lag».

3. ¿Qué son los @keyframes en CSS y cómo se diferencian de una transition?

Son dos formas de animar, pero con distinto control. Una transition define cómo un elemento pasa de un estado A a un estado B (por ejemplo, de opacity: 0 a opacity: 1) en respuesta a un evento como :hover. Es simple y directa. En cambio, los @keyframes te permiten definir una secuencia de animación mucho más compleja con múltiples pasos intermedios (por ejemplo, del 0% al 100%, pasando por el 25%, 50%, etc.). Son como una pequeña línea de tiempo dentro de CSS, lo que te da un control total para crear coreografías de movimiento elaboradas y bucles, sin depender de una interacción del usuario para iniciarse.