As animações acionadas por rolagem do CSS estão chegando!

Bramus

Publicado em: 12 de dezembro de 2025

Em 2023, lançamos as animações de rolagem, que permitem avançar ou retroceder uma animação rolando a tela. Com as animações de rolagem, o progresso da animação avança de 0% para 100% à medida que você rola a tela. Se você parar de rolar, a animação será pausada. Se você rolar para cima, ela será invertida.

O próximo capítulo das animações baseadas em rolagem chega em 2026, com animações acionadas por rolagem no Chrome 145. São animações baseadas em tempo que são acionadas ao cruzar um deslocamento de rolagem específico.

Dê adeus ao IntersectionObserver para esse tipo de efeito, já que agora é possível fazer isso de forma declarativa em CSS.

Acionadores, animações e ações da linha do tempo

Acionar uma animação

Para configurar uma animação acionada por rolagem em CSS, comece com uma animação CSS normal anexada a um elemento:

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

Essa animação usa um DocumentTimeline como driver e dura 0,35 segundo. A animação é acionada automaticamente após o carregamento de página. Para mudar o gatilho, use a nova propriedade CSS animation-trigger:

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

Aqui, a animação é definida para ser acionada pelo gatilho --t. Quando esse acionador é ativado, a ação play-forwards é invocada na animação. Quando ele é desativado, a ação play-backwards é invocada.

A especificação contém a lista completa de ações.

Criar um gatilho

Mas o que é esse gatilho --t? É um gatilho com o nome --t. Para animações acionadas por rolagem, é um "gatilho de linha do tempo" que usa uma linha do tempo de progresso de rolagem ou uma linha do tempo de progresso de visualização como origem.

Para definir um gatilho de linha do tempo, use a propriedade timeline-trigger (ou as abreviações associadas). Por exemplo, para criar um gatilho chamado --t que usa uma linha do tempo de visualização como origem, use o seguinte:

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

O gatilho --t criado é ativado e desativado com base na linha do tempo da visualização associada ao elemento correspondente. Como o intervalo padrão de uma linha do tempo de visualização é o intervalo cover, o acionador também é ativado e desativado quando está dentro ou fora desse intervalo.

Ajustar os intervalos do gatilho

Para ajustar as posições em que o gatilho deve estar ativo ou inativo, especifique os intervalos de ativação e atividade no gatilho. No exemplo a seguir, o intervalo de ativação está definido como entry 100% exit 0%, o que significa que o gatilho será ativado quando o assunto estiver dentro desse intervalo.

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

Como não há um intervalo ativo especificado no snippet anterior, o intervalo de ativação também é usado como o intervalo ativo. Quando fora desse intervalo ativo, o gatilho é desativado.

Quando combinado com o animation-trigger já definido, isso resulta visualmente na animação sendo reproduzida para frente quando o elemento entra totalmente na janela de rolagem e para trás quando está prestes a sair dela.

É possível ter intervalos de ativação e ativos diferentes. Exemplo:

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

Aqui, o gatilho é ativado quando o assunto está no intervalo entry 100% exit 0%. O acionador permanece ativo até sair do intervalo entry 0% exit 100%.

Visualmente, isso faz com que a animação seja reproduzida para frente quando o objeto entra na janela de rolagem e, remover "Gostei" de antes, ela permanece ativa até que o objeto saia completamente da janela.

Limitar o escopo de um gatilho

Os gatilhos são visíveis globalmente, ou seja, a última correspondência que declara um gatilho com um determinado nome "vence". Para limitar a visibilidade de um gatilho, use a propriedade trigger-scope. Isso é semelhante a como anchor-scope pode ser usado.

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

Quando você tem uma regra de CSS que declara um acionador e corresponde a vários elementos, é necessário usar trigger-scope.

Demonstração

Na demonstração a seguir, um formulário é dividido em várias seções de altura total. À medida que cada parte do formulário aparece, ela é animada usando uma animação acionada por rolagem. Ao sair da janela de rolagem, ela é animada para fora.

A lógica de animação acionada por rolagem para isso é:

@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;
}

Dissecado, o código lê:

• O timeline-trigger é chamado de --t e tem o conjunto de origem definido como uma linha do tempo de visualização que rastreia o elemento correspondente.
• O intervalo de ativação do acionador é contain 15% contain 85%. Quando o objeto está dentro desse intervalo, o gatilho é ativado.
• Quando ativado, o gatilho permanece ativo enquanto o assunto estiver no intervalo ativo de entry 100% exit 0%.
• A animação unclip é anexada ao elemento.
• A animação está definida para usar --t como origem do gatilho. Quando o acionador é ativado, a animação começa a ser reproduzida para frente.
• Quando o acionador é desativado, o que acontece quando o assunto sai do intervalo ativo, a animação é reproduzida ao contrário.
• O conteúdo do card também entra e sai usando o mesmo gatilho --t.

O exemplo inclui um substituto usando IntersectionObserver para navegadores sem suporte a timeline-trigger.

Mais demonstrações

Se você não se cansa de animações acionadas por rolagem, confira estas demonstrações:

• Texto de entrada dinâmica
• Conheça os monstros (scrollytelling)
• Forma em transformação

Feedback

Queremos saber sua opinião para continuar melhorando esse recurso. Entre em contato com a gente nas redes sociais ou envie um problema ao Grupo de Trabalho do CSS para deixar feedback.

Se você encontrar um bug, registre um bug do Chromium para nos avisar. Lista de bugs conhecidos: consulte o rastreador de bugs do Chromium.