Próximamente, estarán disponibles las animaciones activadas por desplazamiento de CSS

Bramus

Publicación: 12 de diciembre de 2025

En 2023, lanzamos las animaciones basadas en el desplazamiento, que te permiten avanzar (o retroceder) una animación a través del desplazamiento. Con las animaciones basadas en el desplazamiento, el progreso de la animación avanza del 0% al 100% a medida que te desplazas. Si dejas de desplazarte, la animación se pausa. Si te desplazas hacia arriba, la animación se invierte.

El próximo capítulo de las animaciones basadas en el desplazamiento llegará en 2026, con las animaciones activadas por desplazamiento en Chrome 145. Son animaciones basadas en el tiempo que se activan cuando se cruza un desplazamiento específico.

Despídete de IntersectionObserver para este tipo de efecto, ya que ahora puedes hacerlo de forma declarativa en CSS.

Activadores, animaciones y acciones de la línea de tiempo

Cómo activar una animación

Para configurar una animación activada por desplazamiento en CSS, comienza con una animación CSS normal adjunta a un elemento:

animation: unclip 0.35s ease-in-out both;

Esta animación usa un DocumentTimeline como controlador y se ejecuta durante 0.35 segundos. La animación se activa automáticamente después de que se carga la página. Para cambiar el activador, usa la nueva propiedad de CSS animation-trigger:

animation-trigger: --t play-forwards play-backwards;

Aquí, la animación se configura para que se active con el activador --t. Cuando se activa ese activador, se invoca la acción play-forwards en la animación y, cuando se desactiva el activador, se invoca la acción play-backwards.

La especificación contiene la lista completa de acciones.

Crear un activador

Pero, ¿qué es ese activador --t? Es un activador con el nombre --t. En el caso específico de las animaciones activadas por desplazamiento, se trata de un "activador de cronograma" que usa un cronograma del progreso del desplazamiento o un cronograma del progreso de la visualización como fuente.

Para definir un activador de línea de tiempo, usa la propiedad timeline-trigger (o sus propiedades abreviadas asociadas). Por ejemplo, para crear un activador llamado --t que use un cronograma de la vista como fuente, usa lo siguiente:

timeline-trigger-name: --t;
timeline-trigger-source: view();

Este activador creado --t se activa y desactiva según la línea de tiempo de la vista asociada al elemento coincidente. Dado que el rango predeterminado para una línea de tiempo de la vista es el rango de cover, el activador también se activa y desactiva cuando está dentro o fuera de ese rango.

Ajusta los rangos del activador

Para ajustar las posiciones en las que el activador debe estar activo o inactivo, especifica los rangos de activación y activos en el activador. En el siguiente ejemplo, el rango de activación se establece en entry 100% exit 0%, lo que significa que el activador se activará una vez que el sujeto esté dentro de ese rango.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Como no se especificó ningún rango activo en el fragmento anterior, el rango de activación también se usa como rango activo. Cuando está fuera de ese rango activo, el activador se desactiva.

Cuando se combina con el animation-trigger ya definido, esto genera visualmente que la animación se reproduzca hacia adelante cuando el sujeto ingresó por completo al puerto de desplazamiento y que se reproduzca hacia atrás cuando está a punto de salir del puerto de desplazamiento.

Es posible tener diferentes rangos de activación y de actividad. Por ejemplo:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

Aquí, el activador se activa cuando el sujeto está en el rango de entry 100% exit 0%. El activador permanece activo hasta que sale del rango de entry 0% exit 100%.

Visualmente, esto hace que la animación se reproduzca hacia adelante cuando el objeto ingresa al puerto de desplazamiento y, a diferencia de antes, permanecerá activa hasta que el objeto haya salido por completo del puerto de desplazamiento.

Cómo limitar el alcance de un activador

Los activadores son visibles de forma global, lo que significa que la última coincidencia que declara un activador con un nombre determinado "gana". Para limitar la visibilidad de un activador, usa la propiedad trigger-scope. Esto es similar a cómo se puede usar anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

Cuando tengas una regla de CSS que declare un activador y que coincida con varios elementos, deberás usar trigger-scope.

Demostración

En la siguiente demostración, se divide un formulario en varias secciones de altura completa. A medida que cada parte del formulario aparece en la vista, se anima con una animación activada por el desplazamiento. Cuando sale del puerto de desplazamiento, se muestra una animación de salida.

La lógica de la animación activada por el desplazamiento es la siguiente:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Desglosado, el código se lee de la siguiente manera:

• El timeline-trigger se llama --t y su fuente se establece en una línea de tiempo de la vista que hace un seguimiento del elemento coincidente.
• El rango de activación del disparador es contain 15% contain 85%. Cuando el sujeto está dentro de ese rango, el activador se activa.
• Cuando se activa, el activador permanece activo mientras el sujeto esté en el rango activo de entry 100% exit 0%.
• La animación unclip se adjunta al elemento.
• La animación está configurada para usar --t como su fuente de activación. Cuando el activador se activa, la animación comienza a reproducirse hacia adelante.
• Cuando se desactiva el activador (lo que sucede cuando el sujeto sale del rango activo), la animación se reproduce hacia atrás.
• El contenido de la tarjeta también se anima hacia adentro y hacia afuera con el mismo activador --t.

El ejemplo incluye una alternativa con IntersectionObserver para los navegadores que no admiten timeline-trigger.

Más demostraciones

Si no te cansas de las animaciones activadas por desplazamiento, consulta las siguientes demostraciones:

• Texto que aparece volando
• Conoce a los monstruos (scrollytelling)
• Forma cambiante

Comentarios

Nos interesan tus comentarios para seguir mejorando esta función. Comunícate con nosotros a través de las redes sociales o presenta un problema en el Grupo de trabajo de CSS para dejar tus comentarios.

Si encuentras un error, informa un error de Chromium para que lo sepamos. Lista de errores conocidos: Consulta el Chromium Bug Tracker.