View Transitions API no CSS: Como criar animações fluidas entre páginas sem JavaScript

Durante anos, criar animações fluidas entre trocas de páginas (como a transição de um card de produto para a tela de detalhes) exigia transformar o site em uma pesada Single Page Application (SPA) usando bibliotecas complexas como Framer Motion ou GSAP.

Com a consolidação da View Transitions API nos navegadores modernos, agora é possível aplicar transições nativas nativas diretamente no CSS para aplicações Multi-Page (MPA), sem alterar a arquitetura do servidor ou comprometer o desempenho da página.

Por que transições de página nativas mudam o jogo do Web Design?

A View Transitions API tira do desenvolvedor a responsabilidade de calcular posições de elementos no DOM, coordenadas de bounding box e estados intermediários de animação.

Quando o usuário clica em um link de navegação:

1. O navegador tira uma captura de tela (snapshot) do estado atual da página (::view-transition-old(root)).
2. O novo documento é carregado e renderizado em segundo plano.
3. O navegador tira um snapshot do novo estado (::view-transition-new(root)).
4. Uma transição do tipo cross-fade é executada automaticamente usando a aceleração de hardware da GPU.

Tudo isso acontece sem que o usuário perceba a “piscada” tradicional do recarregamento de página.

Como ativar Cross-Document View Transitions com a regra @view-transition

Para habilitar a animação nativa em navegações comuns entre páginas HTML no mesmo domínio, basta incluir a regra arroba @view-transition no seu arquivo CSS global:

/* src/styles/global.css */
@view-transition {
  navigation: auto;
}

Apenas com essa linha, todas as trocas de página passam a ter um efeito suave de fade-in/fade-out padrão.

Mapeando elementos com view-transition-name para animações morphing

A verdadeira mágica da API surge quando queremos animar elementos específicos de um layout — por exemplo, a imagem de capa de um artigo que se expande do card do blog para o cabeçalho da página individual.

Basta atribuir o mesmo view-transition-name para o elemento na página de origem e de destino:

Na página de lista (card):

<article class="post-card">
  <img 
    src="/capa.jpg" 
    alt="Capa do artigo" 
    style="view-transition-name: hero-cover-123;" 
  />
  <h2>Título do Artigo</h2>
</article>

Na página do post individual:

<main class="post-detail">
  <img 
    src="/capa.jpg" 
    alt="Capa do artigo" 
    style="view-transition-name: hero-cover-123;" 
  />
  <h1>Título do Artigo</h1>
</main>

O navegador identifica os nomes idênticos e automaticamente interpola o tamanho, posição e proporção da imagem durante a mudança de rota.

Customizando animações com pseudo-elementos CSS

Você pode personalizar os tempos e curvas de aceleração de qualquer elemento usando CSS puro:

/* Animação personalizada para a raiz da página */
::view-transition-old(root) {
  animation: 250ms ease-out slide-out-left;
}

::view-transition-new(root) {
  animation: 300ms ease-in slide-in-right;
}

@keyframes slide-out-left {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
}

Suporte dos navegadores e Melhores Práticas

• Suporte atual: Disponível nativamente no Chrome, Edge, Opera e Safari recente. No Firefox, a funcionalidade é degradada graciosamente para a navegação normal sem quebrar o site.
• Respeite prefers-reduced-motion: Sempre desative ou simplifique as animações para usuários que ativaram a preferência por movimento reduzido nas configurações do sistema operacional:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

• Aplicações em UI/UX: Se você quer expandir a criação de protótipos de alta fidelidade e layouts funcionais, leia também nosso artigo sobre ferramentas de IA de UI generativa e veja como prevenir falhas de conversão no design.

Usar a View Transitions API é a maneira mais limpa e performática de oferecer uma experiência digna de aplicativo nativo mantendo a simplicidade do HTML e CSS.