Page Transition

A nova visualização é revelada dentro de um círculo que se expande a partir do ponto do clique.

Adicione uma transição "Circular Reveal" (também chamada clip-path circle expand ou theme toggle reveal) em [onde].
A nova visualização deve aparecer dentro de um círculo que cresce a partir do controle pressionado até cobrir toda a área: suave e constante, acelerando e desacelerando com suavidade.
Faça o círculo começar exatamente onde o controle foi pressionado e troque na hora, sem círculo, se o usuário preferir movimento reduzido (prefers-reduced-motion).

A página antiga desaparece com fade enquanto a nova aparece com fade na mesma área.

Adicione uma "Crossfade Page Transition" (também chamada cross-dissolve ou fade transition) em [onde].
Ao navegar, a página antiga deve desaparecer com fade enquanto a nova aparece ao mesmo tempo na mesma área: suave e bem rápida.
Mantenha as duas páginas no mesmo lugar para que nada se desloque durante o fade e mova o foco para o título principal da nova página após a troca.

Painéis sólidos varrem a tela para cobrir a página antiga e depois se recolhem para revelar a nova.

Adicione uma transição de página "Curtain / Panel Wipe" (também chamada page wipe ou staggered panels) em [onde].
Painéis sólidos devem varrer a tela um após o outro para cobrir a página antiga, a página deve trocar enquanto está totalmente coberta e os painéis devem seguir até sair de vista para revelar a nova: marcante e fluida.
Nunca mostre a nova página antes de os painéis cobrirem a antiga e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

O conteúdo que sai desaparece por completo com fade e depois o que entra aparece com fade e uma leve escala.

Adicione uma transição de página "Fade Through" (também chamada fade-through transition ou out-in route transition) em [onde].
Primeiro, o conteúdo que sai deve desaparecer com fade, rápido e por completo; depois, o que entra deve aparecer com fade enquanto cresce levemente até o seu lugar.
Nunca deixe os dois se sobreporem e evite que o layout do conteúdo que entra se desloque enquanto ele escala.

Uma camada de introdução em tela cheia com um logo ou contador desliza ou desaparece com fade para revelar o site.

Adicione um "Preloader Curtain Lift" (também chamado splash screen ou intro loader) em [onde].
Uma camada de introdução em tela cheia deve ficar parada enquanto uma barra de carregamento se enche e depois subir e sair suavemente para revelar o site, que se acomoda com delicadeza por baixo.
Reproduza só no primeiro carregamento, nunca segure a página mais do que o carregamento realmente leva e pule a animação se o usuário preferir movimento reduzido (prefers-reduced-motion).

O conteúdo que sai e o que entra se movem juntos ao longo do eixo X, Y ou Z com fades para mostrar a relação espacial.

Adicione uma transição de página "Shared Axis" (também chamada shared axis X/Y/Z) em [onde].
Ao avançar, o conteúdo antigo deve deslizar um pouco para um lado e desaparecer rápido com fade enquanto o novo entra pelo outro lado e aparece logo depois; ao voltar, a direção se inverte.
Mantenha o deslocamento curto para que só sugira a direção e ajuste o eixo à navegação: lateral para páginas irmãs, vertical para etapas, profundidade para aprofundar.

Um elemento correspondente, como uma miniatura, se transforma em posição e tamanho de uma página para a seguinte.

Adicione uma "Shared Element Transition" (também chamada hero transition ou view-transition-name morph) em [onde].
Ao ir para a página seguinte, o elemento correspondente, como uma miniatura, deve se mover e crescer suavemente até o seu lugar na nova página enquanto o resto do conteúdo faz um crossfade, e encolher de volta ao retornar.
Dê aos elementos correspondentes das duas páginas uma mesma identidade compartilhada para que se emparelhem corretamente e use um crossfade simples quando o navegador não conseguir transformá-los.

A nova página entra deslizando por um lado enquanto a antiga sai, e a direção segue a profundidade da navegação.

Adicione uma "Slide Page Transition" (também chamada push / pop ou directional slide) em [onde].
Ao avançar, a nova página deve entrar empurrando pela lateral enquanto a antiga sai pelo outro lado; ao voltar, as duas devem se mover na direção oposta: suave, acelerando e desacelerando com suavidade.
Amarre a direção à profundidade da navegação, incluindo o botão Voltar do navegador, e evite que a página role para o lado durante o deslizamento.

A página antiga aumenta ou diminui e desaparece com fade enquanto a nova escala até o seu lugar.

Adicione uma "Zoom Page Transition" (também chamada scale transition ou zoom in / out) em [onde].
Ao entrar em detalhe, a página antiga deve aumentar um pouco e desaparecer com fade enquanto a nova cresce de um tamanho um pouco menor até o seu lugar; ao voltar, o zoom deve ir no sentido oposto: suave e rápido.
Mantenha a escala sutil para que o conteúdo continue legível o tempo todo e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).