CSS View Transitions Cross-Document: Animações de Navegação sem SPA
Até pouco tempo atrás, criar animações fluidas e transições suaves entre páginas web dependia obrigatoriamente de estruturas complexas de Single Page Applications (SPAs) em frameworks como Next.js, Nuxt ou rotas customizadas em JavaScript. Com a maturação da especificação da API de CSS View Transitions, agora é possível alcançar esse efeito premium em sites estáticos e páginas tradicionais de múltiplos documentos (Multi-Page Applications ou MPAs) de forma 100% nativa.
O que são View Transitions de múltiplos documentos (Cross-Document)?
Enquanto a API inicial focava em transições dentro do mesmo documento (onde o JavaScript intercepta o clique e atualiza o DOM manualmente), a especificação Cross-Document opera no nível do próprio navegador.
Quando você navega de pagina-a.html para pagina-b.html, o navegador captura um screenshot da página atual, realiza a navegação de rede normal, renderiza a nova página em segundo plano e faz uma transição de fade ou morphing nativa entre os dois estados. Tudo isso sem perder o fluxo de carregamento tradicional de documentos.
Como ativar o suporte básico no seu arquivo CSS
Para ativar a transição nativa em páginas que pertencem à mesma origem (mesmo domínio), você precisa de apenas uma linha de CSS global. Adicione a seguinte regra no seu arquivo de estilos principal:
@view-transition {
navigation: auto;
}Essa diretiva instrui o navegador a monitorar transições de navegação internas e aplicar o efeito de transição padrão (geralmente uma suave mistura de cross-fade). Isso já dá um aspecto moderno e fluido para a navegação do site sem a necessidade de escrever uma única linha de JavaScript ou carregar frameworks pesados.
Customizando animações de transição de elementos específicos
O comportamento padrão de fade geral é interessante, mas o verdadeiro brilho das View Transitions está nas transições de elementos específicos (como um card de imagem que se expande para virar o banner do artigo principal).
Para fazer isso, você associa elementos de páginas diferentes usando a propriedade view-transition-name. Em ambas as páginas, dê o mesmo identificador único para o elemento:
/* Na listagem de artigos */
.post-card-image-123 {
view-transition-name: post-cover-123;
}
/* Na página do artigo */
.article-banner-hero {
view-transition-name: post-cover-123;
}O navegador identificará que o elemento com o nome post-cover-123 é o mesmo objeto lógico nas duas telas e calculará automaticamente a transição física (tamanho, posição e deformação) durante a troca de página, criando um efeito de expansão contínuo.
Armadilhas comuns de acessibilidade e como contorná-las
Animações de movimento amplo na tela podem causar tontura e desconforto para usuários que sofrem de distúrbios vestibulares. É essencial que seu código respeite as preferências do sistema operacional do visitante.
Sempre envolva suas regras de animação customizadas dentro da media query de redução de movimento:
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}Isso garante que, caso o usuário tenha ativado a opção de reduzir movimentos em seu dispositivo, o site cairá graciosamente de volta para o comportamento de troca de página tradicional, preservando a usabilidade e a inclusão digital do projeto.