Uma navegação entre páginas não precisa terminar em uma troca brusca de tela. Em um artigo publicado no blog do MDN em 9 de outubro de 2025, Yash Raj Bharti apresenta um guia introdutório sobre view transitions em CSS. A proposta é mostrar como aplicações multipágina, conhecidas como MPAs, podem obter transições animadas semelhantes às que durante muito tempo foram associadas às aplicações de página única, ou SPAs.
O ponto central do texto é o suporte à View Transition API em navegadores modernos e, especialmente, à regra CSS @view-transition. Com ela, o navegador pode cuidar de transições entre páginas de uma aplicação multipágina de forma nativa. O artigo também destaca que o recurso foi pensado como aprimoramento progressivo: quando o navegador não oferece suporte, a navegação continua funcionando normalmente, usando o comportamento padrão.
O que muda entre MPAs e SPAs
Antes de apresentar o recurso, o artigo retoma a diferença entre os dois modelos mais comuns de desenvolvimento web. Em uma aplicação multipágina, cada navegação carrega uma nova página a partir do servidor. Isso resulta em uma recarga completa, mas pode tornar o modelo mais simples de construir em aplicações grandes com muitas páginas distintas.
Uma aplicação de página única segue outro caminho. Ela carrega um único documento HTML e atualiza o conteúdo dinamicamente por meio de JavaScript. Esse modelo pode oferecer interações mais rápidas e uma experiência mais suave, mas costuma exigir uma estrutura mais complexa para roteamento no lado do cliente e gerenciamento de estado.
Segundo o texto do MDN, por muito tempo as transições animadas e suaves eram possíveis apenas em SPAs. A View Transition API mudou esse cenário, e a regra CSS @view-transition amplia a possibilidade para navegações entre várias páginas. Assim, uma MPA pode fazer uma transição visual entre, por exemplo, index.html e about.html, em vez de simplesmente trocar de documento de maneira abrupta.
O que foi confirmado sobre o suporte
O artigo divide a especificação CSS View Transitions em dois níveis. O Level 1 permite transições dentro de uma única página usando a View Transition API. No momento descrito pela publicação, esse nível é compatível com Chrome, Edge e Safari. O suporte do Firefox está disponível na versão 144, indicada no texto como estando em beta.
O Level 2 trata das transições entre várias páginas por meio da regra @view-transition. De acordo com o artigo, esse nível é suportado no Chrome 126 ou posterior, no Edge 126 ou posterior e no Safari 18.2 ou posterior. Na data da publicação, o suporte do Level 2 no Firefox ainda estava em desenvolvimento, com expectativa de disponibilidade futura.
Esse quadro é importante para quem está começando porque mostra que o recurso não deve ser tratado como uma obrigação para todos os navegadores. O MDN afirma que, em navegadores sem suporte, os sites continuam funcionando normalmente. A transição é considerada um aprimoramento progressivo: o CSS funciona como uma indicação que só é aplicada quando o navegador sabe lidar com ela, sem interromper a navegação tradicional.
Como criar uma primeira transição
O guia descreve uma configuração inicial que exige apenas algumas linhas de CSS. O exemplo usa duas páginas de demonstração. A primeira, index.html, contém um título, alguns parágrafos e um link para a segunda página. A segunda, hobbies.html, apresenta um título, dois parágrafos curtos e um link de retorno para a primeira.
Depois de preparar as páginas, o desenvolvedor adiciona a configuração indicada pelo artigo ao arquivo style.css. O texto afirma que essa é a etapa necessária para criar a transição básica. Com essa configuração, a navegação entre as duas páginas passa a ter uma transição suave, sem a necessidade de usar JavaScript para controlar esse efeito.
O valor prático da demonstração está na simplicidade do ponto de partida. O artigo não apresenta a técnica como uma substituição obrigatória de SPAs, nem afirma que todas as aplicações devem adotar MPAs. A ideia é mostrar que uma aplicação multipágina pode ganhar uma experiência visual mais contínua usando uma funcionalidade nativa do navegador, enquanto mantém a estrutura de navegação baseada em documentos separados.
Como personalizar o efeito padrão
Depois do exemplo inicial, o guia avança para uma animação de entrada e saída. A proposta é criar um efeito de deslizamento, com uma página entrando pela lateral e saindo de maneira correspondente. Para isso, o exemplo adiciona duas folhas de estilo diferentes às páginas HTML: uma em index.html e outra em hobbies.html.
O texto apresenta dois pseudo-elementos importantes para controlar a transição. ::view-transition-old representa a página anterior, enquanto ::view-transition-new representa a página que está sendo aberta. Na navegação de index.html para hobbies.html, a primeira é a página antiga e a segunda é a nova. Na navegação de volta, essa relação se inverte.
O exemplo chama a animação de entrada de slide-from-right. A configuração correspondente é adicionada ao arquivo hobbies.css. Para completar o comportamento, o artigo propõe uma segunda animação, chamada slide-to-right, adicionada ao arquivo index.css. Nesse caminho de volta, hobbies.html passa a ser a página antiga e index.html se torna a página nova.
O artigo também explica o comportamento padrão do navegador. Por padrão, a animação da view transition cria um cross-fade entre a página antiga e a nova, animando a opacidade e aplicando mix-blend-mode: plus-lighter. No exemplo de deslizamento, a animação padrão é removida com animation: none e substituída pelo efeito personalizado. O texto ainda sugere experimentar diferentes valores de mix-blend-mode caso o desenvolvedor queira explorar outras transições mantendo o cross-fade.
Na demonstração, apenas a página hobbies.html recebe animações nos dois sentidos. O artigo observa que também seria possível animar index.html. Para continuar o exercício, o leitor pode usar o código disponível no repositório mdn/dom-examples e procurar o arquivo index.css, especificamente o ponto em que aparece animation: none.
O que isso significa na prática
Para iniciantes, a principal lição é que a técnica combina uma estrutura de páginas separadas com uma camada visual opcional. O desenvolvedor pode começar com uma navegação convencional e adicionar as transições quando fizer sentido. Se o navegador reconhecer o recurso, a troca de página recebe o efeito definido. Caso contrário, a aplicação continua usando a navegação padrão.
Para quem está evoluindo no desenvolvimento web, o exemplo também ajuda a separar responsabilidades. A View Transition API e a regra CSS cuidam da transição visual, enquanto os documentos HTML continuam representando páginas distintas. O artigo mostra ainda que a personalização acontece por meio de pseudo-elementos específicos, permitindo trabalhar separadamente com a página antiga e com a página nova.
Há, porém, limites claros no que a publicação confirma. O suporte não é uniforme entre navegadores e níveis da especificação. O Level 2, responsável pelas transições entre múltiplas páginas, ainda estava em desenvolvimento no Firefox na data do artigo. Além disso, a fonte descreve uma demonstração introdutória com duas páginas e não afirma que todos os casos de navegação terão o mesmo resultado visual ou exigirão exatamente a mesma configuração.
Também é importante não confundir a transição com uma eliminação da navegação entre documentos. O texto explica que o recurso torna a passagem entre páginas mais suave, mas a aplicação continua sendo organizada como uma MPA. A melhoria está na apresentação dessa mudança, não na transformação automática da arquitetura em uma SPA.
Conclusão
O guia do MDN confirma uma possibilidade útil para projetos que preferem a simplicidade das aplicações multipágina, mas desejam uma navegação visualmente mais fluida. Com o suporte à View Transition API e à regra CSS @view-transition, o navegador pode executar transições entre páginas sem que o desenvolvedor precise controlar esse efeito exclusivamente com JavaScript.
O melhor ponto de entrada é o exemplo básico com index.html, hobbies.html e uma folha de estilos. Depois, o leitor pode estudar os pseudo-elementos de página antiga e nova, substituir o cross-fade padrão por um deslizamento e testar outras combinações. Como o recurso segue a lógica de aprimoramento progressivo, é possível experimentar sem abandonar o funcionamento normal da navegação.
Fonte: https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide
