Zoom Page Transition
Também chamada Scale transition, Zoom in / out
A página antiga aumenta ou diminui e desaparece com fade enquanto a nova escala até o seu lugar.
Onde usar
Entrar ou sair de uma hierarquia
Variações
- zoom in
- zoom out
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
A
B
Clique
Shared Axis
Também chamada Shared axis X/Y/Z
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.
Onde usar
Assistentes por etapas, navegação entre páginas irmãs, drill-down
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.A
B
Clique
Fade Through
Também chamada Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
O conteúdo que sai desaparece por completo com fade e depois o que entra aparece com fade e uma leve escala.
Onde usar
Troca entre destinos sem relação entre si
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.A
Modal Scale-Fade In
Também chamada Dialog open animation, Zoom-fade dialog
Um diálogo aparece enquanto cresce levemente a partir do centro, sobre uma página escurecida.
Onde usar
Diálogos de confirmação, formulários em sobreposição
Adicione uma animação "Modal Scale-Fade In" (também chamada dialog open animation ou zoom-fade dialog) em [onde].
O diálogo deve aparecer enquanto cresce levemente a partir do centro e a página de trás escurece: rápido e sutil, sem quique.
Reproduza uma vez sempre que o diálogo abrir, mova o foco para ele e mantenha-o lá dentro, e use só um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Zoom In
Também chamada Scale In, Zoom In Up, Zoom In Down
O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.
Onde usar
Modais, lightboxes de imagem, popovers
Adicione uma animação de entrada "Zoom In" (também chamada scale in) em [onde].
O elemento deve crescer de pequeno e transparente até o tamanho total enquanto aparece: rápido e suave, sem passar do tamanho final.
Escale-o a partir do centro sem afetar o layout ao redor e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Page Transition
A
B
Clique
Circular Reveal
Também chamada Clip-path circle expand, Theme toggle reveal
A nova visualização é revelada dentro de um círculo que se expande a partir do ponto do clique.
Onde usar
Troca de tema claro/escuro, mudança de página
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
B
Clique
Crossfade Page Transition
Também chamada Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
A página antiga desaparece com fade enquanto a nova aparece com fade na mesma área.
Onde usar
Troca de rota padrão
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.A
B
Clique
Curtain / Panel Wipe
Também chamada Page wipe, Curtain reveal, Stripe transition, Staggered panels
Painéis sólidos varrem a tela para cobrir a página antiga e depois se recolhem para revelar a nova.
Onde usar
Navegação em sites de portfólio e agências
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).