Crossfade Page Transition

Os slides ficam no lugar e se dissolvem um no outro em vez de deslizar.

Adicione um carrossel com fade ("Carousel Crossfade", também chamado fade slideshow ou carousel fade) em [onde].
Os slides devem ficar no lugar e se dissolver devagar um no outro, o antigo sumindo enquanto o próximo aparece ao mesmo tempo, e ficar parados alguns segundos antes da próxima troca.
Volte ao primeiro slide sem cortes, pause ao passar o mouse ou ao receber foco, e não avance sozinho 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.

O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.

Adicione uma animação "Fade In / Fade Out" (também chamada fade) em [onde].
O elemento deve passar de totalmente transparente a totalmente visível no lugar ao aparecer, e sumir da mesma forma ao sair: suave, sem deslocamento nem mudança de escala.
Depois que ele sumir, garanta que não possa mais ser clicado nem alcançado pelo teclado, e troque 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.

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

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