CSS Scroll Animations 2026: View Timeline Ahora Estable

Por Jorge Saud · 2 de enero de 2026

Scroll Animations: Ahora Listas para Producción

Lo que era experimental en 2024 ahora es estable en 2026. Las animaciones impulsadas por scroll tienen amplio soporte de navegadores y están listas para producción sin intersection observers de JavaScript.

Soporte de Navegadores (2026)

Soporte global: ~90%

Los Dos Tipos de Timeline

1. Scroll Timeline

La animación progresa mientras el usuario hace scroll:

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  from { width: 0%; }
  to { width: 100%; }
}

2. View Timeline

La animación se activa cuando el elemento entra/sale del viewport:

.fade-in {
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

Animation Range Explicado

Controla exactamente cuándo las animaciones comienzan y terminan:

.element {
  animation-timeline: view();
  animation-range: entry 10% cover 50%;
  /* Inicio: cuando 10% del elemento ha entrado
     Fin: cuando el elemento cubre 50% del viewport */
}

Keywords de range:

• entry - Elemento entrando al viewport
• exit - Elemento saliendo del viewport
• cover - Elemento cubriendo el viewport
• contain - Viewport conteniendo el elemento

Ejemplo Real de Este Sitio

main section.scroll-animated {
  animation: fadeSlideIn 1s ease both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Sin intersection observers, sin JavaScript - CSS puro.

Avanzado: Scroll Timelines con Nombre

.scroll-container {
  overflow-y: scroll;
  scroll-timeline: --container-scroll y;
}

.animated-element {
  animation: slide linear;
  animation-timeline: --container-scroll;
}

Puntos Clave

1. No se necesita JavaScript - Reemplaza intersection observers con CSS
2. Dos timelines - scroll() para scroll de página, view() para visibilidad de elemento
3. Control preciso - animation-range para timing exacto
4. Listo para producción - 90%+ soporte de navegadores en 2026
5. Performante - Animaciones aceleradas por GPU, en hilo del compositor

Las animaciones impulsadas por scroll eliminan categorías enteras de código JavaScript mientras proporcionan animaciones más suaves y performantes.