Animaciones con scroll en CSS: desde 2026 funcionan en todos los navegadores, sin JavaScript

Por Daniele Forciniti

Animaciones con scroll en CSS: desde 2026 funcionan en todos los navegadores, sin JavaScript

Desde el 27 de octubre de 2026 las animaciones con scroll se pueden hacer solo con CSS, sin una línea de JavaScript, y funcionan en todos los navegadores principales: Chrome, Edge, Safari y Firefox. Con la propiedad animation-timeline una animación ya no avanza con el tiempo, sino con el desplazamiento de la página: la barra que muestra cuánto has leído, las tarjetas que aparecen al entrar en pantalla, la imagen que se desvanece mientras bajas. Firefox 159 fue el último en llegar, y desde ese día la función tiene el sello «Baseline 2026»: se puede usar en webs reales, con un pequeño cuidado para los navegadores sin actualizar.

Qué ha pasado y por qué es una buena noticia

El 27 de octubre salió Firefox 159, y en sus notas para desarrolladores hay una línea que muchos esperaban: las animaciones guiadas por el scroll vienen activadas de serie. Chrome y Edge las tenían desde la versión 115, en julio de 2023, y Safari desde la versión 26, en septiembre de 2025, como explica el blog de WebKit. Con Firefox se cierra el círculo.

Cronología del soporte de las animaciones guiadas por scroll: Chrome y Edge 115, Safari 26, Firefox 159

Ese mismo día la función entró en Baseline, el sistema con el que los navegadores y MDN indican qué se puede usar sin problemas. En concreto es «newly available», es decir, disponible en las últimas versiones de todos los navegadores principales. Pasará a «widely available», el nivel que da más tranquilidad, 30 meses después, hacia abril de 2029. Según Can I use hoy llega a cerca del 89% de los usuarios del mundo.

¿Por qué es una buena noticia para quien tiene una web? Hasta ahora estos efectos se hacían con JavaScript: librerías como GSAP con ScrollTrigger o AOS, o las animaciones de entrada de los maquetadores visuales. Código de más que descargar, ejecutar y actualizar, solo para que aparezcan tres tarjetas.

Con JavaScript (como se hacía)Con CSS (desde ahora)
Qué hace faltaUna librería o un script que escucha el scrollDos o tres líneas de CSS
Peso en la páginaArchivos JavaScript que descargar y ejecutarNingún archivo más
FluidezDepende del hilo principal, que puede estar ocupadoEl navegador puede gestionarla fuera del hilo principal
MantenimientoActualizaciones de la librería y posibles conflictosSolo CSS, sin dependencias
Navegadores antiguosFunciona casi en todas partesHay que prever un plan B (lo vemos abajo)

Cómo funciona: scroll() y view()

Una animación CSS normal avanza con el tiempo: dura dos segundos, empieza y termina. La propiedad animation-timeline cambia el reloj: en lugar del tiempo, la mueve el scroll. Las animaciones se escriben con los mismos @keyframes de siempre, solo cambia quién las mueve. Hay dos relojes posibles.

  • scroll(): la animación sigue cuánto has desplazado un contenedor, normalmente la página entera. Al 0% estás arriba, al 100% abajo del todo. Es el adecuado para la barra de progreso de lectura.
  • view(): la animación sigue el paso de un elemento por la pantalla, desde que entra por abajo hasta que sale por arriba. Es el adecuado para que aparezcan textos, imágenes y tarjetas.

Con view() también se elige en qué tramo del recorrido ocurre la animación, con la propiedad animation-range. Los tramos tienen cuatro nombres: entry (mientras entra), contain (mientras se ve entero), exit (mientras sale) y cover (todo el recorrido).

Las fases de view() en las animaciones CSS con scroll: entry, contain, exit y cover

Tres ejemplos listos para copiar

Los ejemplos que siguen los he probado uno a uno en Chromium 145, también con las animaciones reducidas activadas, y he comprobado en MDN que las propiedades que usan funcionan en Firefox 159 y Safari 26. Cada uno lleva ya las dos protecciones de las que hablo más abajo: el control para navegadores antiguos y el respeto a quien ha desactivado las animaciones.

Demo de animaciones con scroll solo con CSS: barra de lectura y tarjetas que aparecen

1. La barra de progreso de lectura

Una barra fina en la parte de arriba que se llena mientras lees. Basta con un elemento vacío con la clase barra-lectura, normalmente justo después de abrir el body.

.barra-lectura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #ff9c00;
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 999;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .barra-lectura {
      animation: avanza 1ms linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes avanza {
  to { transform: scaleX(1); }
}

2. Elementos que aparecen al entrar en pantalla

El efecto más usado: textos, imágenes y tarjetas que suben y se encienden mientras haces scroll. Pon la clase aparece a los elementos que quieras animar. Con entry 0% cover 30% la animación empieza en cuanto el elemento asoma por abajo y termina cuando ha hecho un tercio de su recorrido, así que ya está completa al llegar a media pantalla.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aparece {
      animation: aparicion 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

@keyframes aparicion {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

3. El título de la primera sección que se desvanece al bajar

El contenido de la sección inicial (hero) sube y se desvanece mientras el usuario baja. Aquí se usa el tramo exit: la animación solo ocurre mientras el elemento sale por arriba.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-contenido {
      animation: desvanece 1ms linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes desvanece {
  to { opacity: 0; transform: translateY(-60px) scale(.96); }
}

Si quieres ver decenas de efectos más, desde carruseles 3D hasta tarjetas que se apilan, la web scroll-driven-animations.style de Bramus Van Damme, que trabaja en este tema para Google, reúne demos y herramientas para entender los tramos de view().

Los errores más comunes (y cómo evitarlos)

Probando los ejemplos me encontré con tres trampas que casi ninguna guía en español menciona. Conviene conocerlas antes, porque en los tres casos el código parece correcto pero la animación no arranca.

El orden de las propiedades

El shorthand animation devuelve animation-timeline a su valor por defecto, y no puede fijarla. Si escribes la timeline antes del shorthand, se borra y la animación vuelve a seguir el tiempo: dura un milisegundo y se acaba. MDN lo dice claramente, y en mi prueba pasó exactamente eso. La regla: animation-timeline siempre después de animation.

/* NO funciona: el shorthand animation pone a cero la timeline */
.aparece {
  animation-timeline: view();
  animation: aparicion 1ms linear both;
}

/* Funciona: la timeline va después */
.aparece {
  animation: aparicion 1ms linear both;
  animation-timeline: view();
}

overflow: hidden en el contenedor

Esta me hizo perder un cuarto de hora. Si la barra de progreso está dentro de un contenedor con overflow: hidden (pasa a menudo, a veces solo para redondear las esquinas) y usas scroll(nearest), la barra se queda en cero. El motivo es que hidden convierte el contenedor en una zona desplazable, y el navegador sigue a esa zona, que nunca se mueve. La solución es usar overflow: clip, que recorta igual pero no crea una zona desplazable, o apuntar directamente a la página con scroll(root). En mi prueba, a mitad de página la barra con hidden estaba en 0 y la de clip en el 50%.

La duración de la animación

Con una timeline de scroll la duración no cuenta, porque es el scroll el que marca el ritmo. Firefox 159 acepta el valor auto, que es el predeterminado, pero muchos desarrolladores escriben igualmente 1ms en el shorthand, como en los ejemplos de arriba: no cambia nada en los navegadores actualizados y evita sorpresas con los que trataban la duración de otra forma. Lo que no hay que hacer es poner 2s pensando que así el efecto va más lento: la velocidad la decide el tramo elegido con animation-range.

Las dos protecciones que hay que poner siempre

Baseline «newly available» significa que las últimas versiones de los navegadores lo soportan, no que todos tus visitantes las tengan. Más o menos uno de cada diez usuarios usa todavía un navegador que no lo entiende: iPhone sin actualizar, versiones antiguas de Firefox, navegadores de algunos Android. Para ellos hace falta un plan B.

  1. El control @supports. Si metes las animaciones dentro de @supports (animation-timeline: view()), los navegadores que no las entienden se saltan todo el bloque. Cuidado con cómo escribes los estados iniciales: en los ejemplos la opacidad a cero está solo en los @keyframes, así que quien no tiene soporte ve los elementos con normalidad, sin animación. Si en cambio pones opacity: 0 fuera del control, en los navegadores antiguos los contenidos se quedan invisibles. Es el error que más daño hace, también al SEO, porque un texto oculto es un texto que el usuario no lee.
  2. Las animaciones reducidas. Algunas personas desactivan las animaciones en los ajustes del móvil o del ordenador, por ejemplo por problemas de vértigo o de atención. Con @media (prefers-reduced-motion: no-preference) las animaciones solo arrancan para quien no ha pedido reducirlas. En mi prueba, con las animaciones reducidas activadas todos los contenidos estaban visibles y quietos. La documentación de MDN explica bien cómo funciona este ajuste.

Cómo usar las animaciones con scroll en WordPress, Elementor y Wix Studio

No hace falta ser desarrollador. Se añaden con el mismo método que cualquier otro estilo personalizado:

  • WordPress: pegas el CSS en Apariencia, Personalizar, CSS adicional (o en el campo de CSS del tema de bloques) y añades la clase aparece a los bloques que quieras animar, desde el panel Avanzado, «Clases CSS adicionales».
  • Elementor: el CSS va en el CSS personalizado del sitio y la clase en Avanzado, «Clases CSS». Con el editor V4 de Elementor y su nueva gestión de clases es todavía más cómodo, porque creas la clase una vez y la reutilizas en todas partes. Si usas las «Animaciones de entrada» de Elementor, desactívalas en esos mismos elementos para no sumar dos efectos.
  • Wix Studio: el CSS personalizado del sitio permite añadir las mismas reglas y asignar las clases a los elementos. En el editor clásico de Wix este camino no existe.

En las webs que llevo, tanto en WordPress como en Wix Studio, a partir de ahora este es el camino que propongo para los efectos con scroll, en lugar de las librerías.

Qué cambia para el rendimiento y el SEO

Google no premia una web por estar animada con CSS en vez de con JavaScript. Lo que cuenta es el efecto en los Core Web Vitals, y ahí la ganancia es real. Menos JavaScript que descargar y ejecutar significa un hilo principal más libre, y por tanto una página que responde antes a clics y toques: es lo que mide el INP. Según la guía de Chrome for Developers, estas animaciones pueden ejecutarse fuera del hilo principal, algo que con los scripts que escuchan el scroll era casi imposible.

Dos cuidados, eso sí. El primero: anima sobre todo transform y opacity, que el navegador gestiona sin recalcular la página; animar alturas, márgenes o posiciones anula buena parte de la ventaja. El segundo: no escondas los contenidos más importantes, como el título y el primer párrafo, detrás de una animación de entrada. Si el elemento más grande de la página empieza invisible, puedes empeorar el LCP.

Mi opinión

Hago webs desde hace más de diez años, y he perdido la cuenta de las veces que he tenido que cargar una librería entera solo para que aparecieran tres tarjetas al hacer scroll. Es una de esas novedades que no hacen ruido pero cambian el trabajo diario: menos código, menos plugins, menos cosas que se rompen con cada actualización.

Mi consejo es usarlas, pero con medida. Una web que se mueve con cada scroll cansa enseguida y distrae de lo importante, que es el contenido y el contacto. Una barra de lectura en los artículos, una aparición suave en las tarjetas de servicios, quizá un hero que se desvanece: con eso la web ya parece más cuidada, sin pesar ni un gramo más. Y siempre con las dos protecciones, porque un efecto que esconde los textos a uno de cada diez usuarios no vale la pena.

En resumen

Desde el 27 de octubre de 2026, con Firefox 159, las animaciones guiadas por el scroll funcionan en Chrome, Edge, Safari y Firefox solo con CSS. Se usa animation-timeline: scroll() para seguir el desplazamiento de la página y view() para seguir el paso de un elemento por la pantalla, eligiendo el tramo con animation-range. Hay que protegerlas siempre con @supports y prefers-reduced-motion, escribir la timeline después del shorthand animation y tener cuidado con overflow: hidden. La ventaja es menos JavaScript, animaciones más fluidas y una ayuda a los Core Web Vitals.

Preguntas frecuentes

¿Desde cuándo funcionan las animaciones con scroll en CSS en todos los navegadores?

Desde el 27 de octubre de 2026, con la salida de Firefox 159. Chrome y Edge las soportan desde la versión 115 (julio de 2023) y Safari desde la versión 26 (septiembre de 2025).

¿Sigue haciendo falta JavaScript para estos efectos?

Para apariciones, barras de progreso, parallax y fundidos, no. JavaScript sigue siendo útil para lógicas complejas, por ejemplo animaciones que dependen de datos o de acciones del usuario, y como plan B si necesitas el efecto también en navegadores antiguos.

¿Qué pasa en los navegadores antiguos?

Si usas el control @supports y dejas los estados iniciales solo en los keyframes, en los navegadores antiguos los contenidos se ven con normalidad, sin animación. La web sigue completa, solo falta el efecto.

¿Qué diferencia hay entre scroll() y view()?

scroll() sigue cuánto has desplazado un contenedor, normalmente la página entera, y sirve para la barra de lectura. view() sigue el paso de un solo elemento por la pantalla, y sirve para hacer aparecer textos e imágenes.

¿Por qué no arranca mi animación?

Las causas más habituales son tres: animation-timeline escrita antes del shorthand animation, un contenedor con overflow: hidden que se convierte en la zona de scroll que sigue el navegador, o las animaciones reducidas activadas en el dispositivo, que con el código correcto las desactivan a propósito.

¿Estos efectos ayudan al SEO?

No directamente. Ayudan al rendimiento, porque quitan JavaScript de la página y pueden mejorar el INP. En cambio pueden perjudicar si esconden los contenidos principales o retrasan la aparición del elemento más grande de la página.

¿Se pueden usar en WordPress y Elementor sin plugins?

Sí. Basta con pegar el CSS en el CSS adicional del tema o en el CSS personalizado de Elementor y asignar una clase a los elementos que quieras animar.

Lee también:
Elementor MCP: qué es, cómo se activa y qué puede hacer de verdad la IA en tu web WordPress ·
WordPress 7.1.1: los 11 fallos de seguridad corregidos y por qué actualizar ya ·
Datos estructurados en 2026: cuáles siguen sirviendo (y cuáles ya no)

Fuentes

Avatar de Daniele Forciniti
Daniele Forciniti
Soy Daniele Forciniti, un experto en diseño web y SEO con más de 10 años de experiencia y diversas certificaciones profesionales. Estoy especializado en HTML y CSS, y utilizo CMS como WordPress. Soy el mayor experto en España en WIX y WIX Studio, y también me encargo del posicionamiento web SEO en buscadores y de marketing digital. Me apasiona mi trabajo y me actualizo constantemente para ofrecer soluciones innovadoras y de alta calidad a mis clientes.
Contáctanos ahora