Fade In / Fade Out
Também chamada Fade
O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.
Onde usar
Modais, toasts e conteúdo de página surgindo
Variações
- in
- 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 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).Animações parecidas
ABCD
Blur In
Também chamada Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.
Onde usar
Revelação de títulos e textos hero
Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).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
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.Fade Up
Também chamada Fade In Up, Reveal on Scroll
O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.
Onde usar
Títulos de seção, cards e imagens que aparecem ao rolar a página
Adicione uma animação de entrada "Fade Up" (também chamada fade-in-up ou reveal on scroll) em [onde].
Os elementos devem subir levemente enquanto aparecem, na primeira vez que entram na tela ao rolar: sutil e rápido, sem efeito de quique.
Reproduza só uma vez e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Entrance & Exit
A
Fade In Directional
Também chamada Fade In Down, Fade In Left, Fade In Right
O elemento aparece enquanto se desloca um pouco a partir de um lado até a posição final.
Onde usar
Seções e cards que aparecem ao carregar ou rolar a página
Adicione uma animação de entrada "Fade In Directional" (também chamada fade in left, fade in right ou fade in down) em [onde].
O elemento deve aparecer enquanto se desloca um pouco a partir de um lado até a posição final: rápido e fluido, desacelerando ao chegar, sem quique.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Fade Out Directional
Também chamada Fade Out Up, Fade Out Down
O elemento desaparece enquanto se desloca em uma direção.
Onde usar
Descartar notificações e cards
Adicione uma animação de saída "Fade Out Directional" (também chamada fade out up ou fade out down) em [onde].
O elemento deve desaparecer enquanto se desloca um pouco em uma direção: rápido, acelerando ao sair.
Tire-o do layout só depois que o fade terminar, para o conteúdo vizinho não pular antes da hora, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).