T
css animations scroll-driven keyframes web-design

Animaciones CSS Modernas: Scroll-Driven, Spring y más allá

Lleva tus animaciones web al siguiente nivel. Aprende sobre las animaciones CSS impulsadas por scroll, física de resortes y funciones de tiempo avanzadas.

2026-04-18

Animaciones CSS Modernas: Scroll-Driven, Spring y más allá

Las animaciones ya no son solo adornos "agradables de tener". Son herramientas esenciales para proporcionar feedback, guiar la atención del usuario y crear una experiencia de marca memorable.

El CSS moderno ha introducido formas revolucionarias de animar elementos que antes requerían complejos oyentes de scroll en JavaScript o pesadas librerías de animación.

1. Animaciones impulsadas por scroll: Sin JavaScript

La adición más emocionante a las animaciones CSS es la especificación de Animación Impulsada por Scroll (Scroll-Driven Animation). Permite vincular el progreso de una animación directamente a la posición de desplazamiento de un contenedor.

Cómo funciona:

Anteriormente, necesitabas window.onscroll y requestAnimationFrame. Ahora, solo necesitas scroll-timeline.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* ¡Vinculado al scroll de la página! */
}

Casos de Uso Clave:

  • Barras de progreso de lectura: Muestra cuánto ha avanzado el usuario.
  • Efectos Parallax: Mueve elementos de fondo a diferentes velocidades respecto al scroll.
  • Revelar al hacer scroll: Desvanece elementos a medida que entran en el viewport usando view-timeline.

2. Keyframes avanzados y Composición

El CSS moderno permite un control más granular sobre cómo se combinan las animaciones.

  • animation-composition: Define cómo deben mezclarse múltiples animaciones que afectan a la misma propiedad (ej. replace, add o accumulate).
  • animation-range: Ajusta con precisión cuándo comienza y termina una animación impulsada por scroll dentro del viewport.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* Solo anima mientras el elemento está en el 50% central de la pantalla */
  animation-range: entry 25% exit 75%;
}

3. Más allá de lo lineal: Cubic-Bezier y Física de Resortes

Las funciones de tiempo definen la "sensación" de una animación. Mientras que ease-in-out es el estándar, los diseños avanzados usan curvas personalizadas.

Cubic-Bezier

Una función cubic-bezier te permite crear efectos de "rebote" o "anticipación".

.button:active {
  /* Un ligero efecto de rebote */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

Animaciones de Resorte CSS (Experimental)

Aunque aún no es totalmente nativo en todos los navegadores, el concepto de Física de Resortes (Spring Physics) (masa, rigidez, amortiguación) está llegando a CSS. Esto crea un movimiento mucho más natural y orgánico que el tiempo tradicional basado en duración.

4. Rendimiento: La regla de los 60FPS

La clave para animaciones fluidas es mantenerse fuera del "Hilo Principal". Las animaciones CSS modernas están altamente optimizadas, pero solo si animas las propiedades correctas.

Seguro de animar:

  • transform (escala, rotación, traslación)
  • opacity
  • filter (en algunos navegadores)

Evita animar (causa saltos de diseño):

  • width / height
  • margin / padding
  • top / left / bottom / right

5. View Transitions: Animando el cambio del DOM

Combinado con la API View Transition, CSS ahora puede gestionar la "metamorfosis" de elementos entre dos estados, creando una experiencia fluida similar a una aplicación nativa.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ: Preguntas Frecuentes

P: ¿Son compatibles las animaciones impulsadas por scroll?

R: A partir de 2024, son compatibles con Chrome y Edge. Firefox y Safari las tienen en desarrollo. Puedes usarlas hoy como una "mejora progresiva": el sitio sigue funcionando sin ellas, pero se ve mejor con ellas.

P: ¿Por qué mi animación va a tirones?

R: Asegúrate de estar animando solo transform y opacity. Comprueba si tienes demasiados efectos de backdrop-filter activos, ya que pueden ser pesados para el rendimiento.

P: ¿Puedo usar @scroll-timeline?

R: La sintaxis antigua @scroll-timeline ha sido reemplazada por las funciones más concisas animation-timeline: scroll() y view(). Recomendamos usar la sintaxis más nueva para estar preparado para el futuro.

Da vida a tu sitio

Las animaciones son el "alma" de una interfaz de usuario moderna. Al dominar las líneas de tiempo impulsadas por scroll y las funciones de tiempo avanzadas, puedes crear experiencias profesionales y atractivas que hagan que los usuarios vuelvan.

¿Listo para perfeccionar tus tiempos? Prueba nuestro Generador de Cubic-Bezier (próximamente) o usa nuestras herramientas de animación existentes.

Volver al blog