Preloader Curtain Lift

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).

Um número conta de um valor inicial até um valor final quando fica visível.

Adicione um contador animado (Number Ticker) em [onde], também chamado count up ou animated counter.
Quando o número entrar na tela, ele deve contar de zero até o valor final, rápido no começo e desacelerando suavemente ao chegar.
Use dígitos de largura fixa para nada ao redor tremer, conte só uma vez e mostre o valor final de imediato para leitores de tela e se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento desliza para além da borda de um contêiner e desaparece.

Adicione uma animação de saída "Slide Out" (também chamada slide out up ou slide out down) em [onde].
O elemento deve deslizar para além da borda do contêiner e desaparecer, continuando totalmente opaco: rápido, acelerando ao sair.
Corte-o na borda do contêiner, esconda-o do teclado e dos leitores de tela quando sair de vista e esconda-o na hora 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.