T
css animations scroll-driven keyframes web-design

Animações CSS Modernas: Scroll-Driven, Spring e Além

Leve as suas animações web para o próximo nível. Aprenda sobre Animações CSS Scroll-Driven, física de molas e funções de timing avançadas.

2026-04-18

Animações CSS Modernas: Scroll-Driven, Spring e Além

As animações já não são apenas ornamentos "agradáveis de ter". São ferramentas essenciais para fornecer feedback, guiar a atenção do utilizador e criar uma experiência de marca memorável.

O CSS moderno introduziu formas revolucionárias de animar elementos que anteriormente exigiam listeners de scroll complexos em JavaScript ou bibliotecas de animação pesadas.

1. Animações Scroll-Driven: Sem JS Necessário

A adição mais excitante às animações CSS é a especificação Scroll-Driven Animation. Ela permite ligar o progresso de uma animação diretamente à posição de scroll de um contentor.

Como funciona:

Anteriormente, precisava de window.onscroll e requestAnimationFrame. Agora, só precisa de scroll-timeline.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* Ligar ao scroll da página! */
}

Casos de Uso Principais:

  • Barras de Progresso de Leitura: Mostra o quanto o utilizador já percorreu na página.
  • Efeitos Parallax: Move elementos de fundo a diferentes velocidades relativas ao scroll.
  • Revelar no Scroll: Faz o fade-in de elementos à medida que entram na viewport usando view-timeline.

2. Keyframes Avançados e Composição

O CSS moderno permite um controlo mais granular sobre como as animações são combinadas.

  • animation-composition: Define como múltiplas animações que afetam a mesma propriedade devem misturar-se (ex: replace, add, ou accumulate).
  • animation-range: Ajusta precisamente quando uma animação scroll-driven começa e termina dentro da viewport.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* Animado apenas enquanto o elemento está nos 50% centrais do ecrã */
  animation-range: entry 25% exit 75%;
}

3. Além do Linear: Cubic-Bezier e Física de Molas (Spring)

As funções de timing definem o "sentimento" de uma animação. Embora o ease-in-out seja o padrão, designs avançados usam curvas personalizadas.

Cubic-Bezier

Uma função cubic-bezier permite criar efeitos de "salto" ou "antecipação".

.button:active {
  /* Um ligeiro efeito de ressalto */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

Animações de Mola CSS (Experimental)

Embora ainda não seja totalmente nativo em todos os browsers, o conceito de Física de Molas (Spring Physics) (massa, rigidez, amortecimento) está a chegar ao CSS. Isto cria um movimento muito mais natural e orgânico do que o timing tradicional baseado em duração.

4. Performance: A Regra dos 60FPS

A chave para animações fluidas é manter-se fora da "Main Thread". As animações CSS modernas são altamente otimizadas, mas apenas se animar as propriedades corretas.

Seguro para animar:

  • transform (scale, rotate, translate)
  • opacity
  • filter (em alguns browsers)

Evite animar (causa saltos de layout):

  • width / height
  • margin / padding
  • top / left / bottom / right

5. View Transitions: Animando a Mudança do DOM

Combinado com a View Transition API, o CSS pode agora lidar com o "morphing" de elementos entre dois estados, criando uma experiência fluida semelhante a uma aplicação nativa.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ: Perguntas Frequentes

P: As Animações Scroll-Driven já são suportadas?

R: A partir de 2024, são suportadas no Chrome e Edge. Firefox e Safari têm-nas em desenvolvimento. Pode usá-las hoje como uma "melhoria progressiva" — o site continua a funcionar sem elas, mas fica melhor com elas.

P: Porque é que a minha animação está a soluçar?

R: Certifique-se de que está apenas a animar transform e opacity. Verifique se tem demasiados efeitos de backdrop-filter ativos, pois podem ser pesados para a performance.

P: Posso usar @scroll-timeline?

R: A sintaxis antiga @scroll-timeline foi substituída pelas funções mais concisas animation-timeline: scroll() e view(). Recomendamos o uso da sintaxe mais recente para estar preparado para o futuro.

Dê Vida ao seu Site

As animações são a "alma" de um interface de utilizador moderno. Ao dominar timelines scroll-driven e funções de timing avançadas, pode criar experiências profissionais e envolventes que fazem os utilizadores voltar.

Pronto para aperfeiçoar o seu timing? Experimente o nosso Gerador de Cubic-Bezier (brevemente) ou use as nossas ferramentas de animação existentes.

Voltar ao blog