Animações CSS Orientadas por Rolagem: 5 Padrões de Animação de Rolagem com CSS Puro Sem JavaScript

前端工程(Atualizado em 14 de jul. de 2026)

Animações CSS Orientadas por Rolagem: Rolagem Suave Sem JS

Parallax com listeners de rolagem JS causando travamentos, código verboso do IntersectionObserver, sobrecarga de desempenho do requestAnimationFrame — as animações de rolagem dependem do JavaScript há muito tempo. As animações CSS orientadas por rolagem permitem implementar parallax, barras de progresso e animações de revelação puramente em CSS: zero JS, 60fps, aceleração GPU automática. Em 2026, as animações CSS orientadas por rolagem são totalmente suportadas no Chrome e Safari.

Este artigo cobre 5 padrões principais, guiando você através de scroll-timeline → view-timeline → parallax → indicador de progresso → animações de revelação.

Conceitos Básicos

Conceito Descrição
scroll-timeline Linha do tempo de animação baseada na posição de rolagem
view-timeline Linha do tempo de animação baseada na visibilidade do elemento
animation-timeline Especifica qual linha do tempo de rolagem uma animação usa
animation-range Posições de início e fim da animação dentro do intervalo de rolagem
scroll() Função de linha do tempo de rolagem anônima
view() Função de linha do tempo de visualização anônima
scroll-progress Progresso de rolagem 0-1
view-progress Progresso de visibilidade 0-1

Análise do Problema: 5 Principais Desafios de Animação de Rolagem CSS

  1. Compatibilidade de navegadores: O suporte do Firefox está atrasado
  2. Depuração difícil: O suporte do DevTools para animações de rolagem é limitado
  3. Rolagem aninhada: A configuração de contêineres de rolagem que não são do documento é complexa
  4. Cálculo do intervalo de animação: A porcentagem de animation-range tem alto custo de compreensão
  5. Fallback: Navegadores não suportados precisam de fallback com JS

Passo a Passo: 5 Padrões de Animação de Rolagem CSS

Padrão 1: Animação de Progresso de Rolagem com scroll-timeline

/* Barra de progresso no topo da página */
@keyframes progress-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transform-origin: left;
  animation: progress-bar linear;
  animation-timeline: scroll(root);
}

Padrão 2: Animação de Revelação no Viewport com view-timeline

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.card {
  animation: reveal-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;
}

Padrão 3: Efeito de Rolagem Parallax

@keyframes parallax-slow {
  from { transform: translateY(0); }
  to { transform: translateY(-100px); }
}

@keyframes parallax-fast {
  from { transform: translateY(0); }
  to { transform: translateY(-300px); }
}

.parallax-bg {
  animation: parallax-slow linear both;
  animation-timeline: scroll(root);
}

.parallax-fg {
  animation: parallax-fast linear both;
  animation-timeline: scroll(root);
}

Padrão 4: Linha do Tempo de Rolagem Nomeada

.scroller {
  overflow-y: auto;
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
}

@keyframes rotate-icon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-icon {
  animation: rotate-icon linear;
  animation-timeline: --my-scroller;
}

Padrão 5: Sequências de Animação Complexas

@keyframes hero-sequence {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
}

.hero-title {
  animation: hero-sequence linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

Guia de Armadilhas

Armadilha 1: Não especificar animation-timeline

/* ❌ Errado: falta animation-timeline */
.element {
  animation: slide-in 1s linear;
  /* A animação não seguirá a rolagem */
}

/* ✅ Correto: especificar linha do tempo de rolagem */
.element {
  animation: slide-in linear both;
  animation-timeline: view();
}

Armadilha 2: Valores errados de animation-range

/* ❌ Errado: intervalo excede o intervalo de rolagem */
.element {
  animation-range: entry 0% entry 200%; /* 200% inválido */
}

/* ✅ Correto: usar intervalo válido */
.element {
  animation-range: entry 0% entry 100%;
}

Armadilha 3: Transform em conflito com a rolagem

/* ✅ Correto: usar dica will-change */
.parallax {
  animation: parallax linear both;
  animation-timeline: scroll(root);
  will-change: transform;
}

Armadilha 4: Não lidar com o fallback

/* ✅ Correto: fornecer fallback */
@supports (animation-timeline: view()) {
  .card {
    animation: reveal-up linear both;
    animation-timeline: view();
  }
}

@supports not (animation-timeline: view()) {
  .card { opacity: 1; transform: none; }
}

Armadilha 5: Contêiner de rolagem sem overflow

/* ✅ Correto: garantir que o contêiner seja rolável */
.scroller {
  overflow-y: auto;
  scroll-timeline-name: --my-scroll;
}

Solução de Erros

# Erro Causa Solução
1 A animação não segue a rolagem Nenhum animation-timeline definido Adicionar animation-timeline: view() ou scroll()
2 A animação termina cedo animation-range muito pequeno Aumentar o intervalo
3 Direção de parallax errada scroll-timeline-axis mal configurado Usar block/inline para direção
4 Linha do tempo nomeada inválida scroll-timeline-name incompatível Garantir que os nomes pai-filho correspondam
5 Travamento da animação Sem will-change Adicionar will-change: transform
6 Firefox não funciona Navegador não suporta Usar @supports para fallback
7 Rolagem aninhada não funciona Conflito de rolagem interno/externo Usar scroll-timeline nomeado
8 Animação pulando Keyframes não suaves o suficiente Adicionar mais keyframes ou usar linear
9 Elementos fixos anormais transform afeta posicionamento fixo Mover elementos fixos para fora do contêiner transform
10 Mobile não fluido Aceleração GPU não habilitada Adicionar transform: translateZ(0)

Otimização Avançada

  1. Scroll Snap + Animações de Rolagem: Combinando rolagem paginada com animações
  2. Propriedades personalizadas CSS Houdini: Registrar propriedades de animação para efeitos complexos
  3. prefers-reduced-motion: Respeitar a preferência do usuário por movimento reduzido
  4. Container queries + animações de rolagem: Sinergia responsiva e de animação de rolagem
  5. WAAPI + Scroll Timeline: Web Animations API combinada com linhas do tempo de rolagem CSS

Comparação

Dimensão CSS Scroll-Driven JS IntersectionObserver Evento scroll JS GSAP ScrollTrigger
Desempenho ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐
Volume de código ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐
Suporte de navegadores ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Flexibilidade ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Facilidade de depuração ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
Curva de aprendizado ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐

Resumo: As animações CSS orientadas por rolagem permitem obter efeitos de rolagem suaves com zero JS, superando amplamente as soluções JS. As animações de rolagem CSS são adequadas para cenários de interação de rolagem que buscam desempenho extremo, especialmente parallax, barras de progresso e animações de revelação. Com suporte completo do Chrome e Safari em 2026, usar com fallback @supports.

Ferramentas Online

Experimente estas ferramentas executadas localmente no navegador — nenhum cadastro necessário →

#scroll-timeline#视差效果#滚动动画#CSS动画#2026#前端工程