Blur Out
Também chamada Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
O elemento fica cada vez mais desfocado enquanto desaparece ou desliza para fora.
Onde usar
Transições suaves e saídas de texto
Variações
- fade only
- slide 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 de saída "Blur Out" (também chamada text blur out ou smoky text dissipate) em [onde].
O conteúdo deve ficar cada vez mais desfocado enquanto desaparece no lugar: suave e um tanto lento, como se estivesse se dissolvendo.
Oculte ou remova o elemento só depois que o desfoque terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
A
Puff In / Puff Out
Também chamada Puff
O elemento encolhe de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça, ou o contrário ao sair.
Onde usar
Aparição suave de objetos
Adicione uma animação "Puff In / Puff Out" (também chamada puff) em [onde].
Ao aparecer, o elemento deve encolher de um estado grande, desfocado e transparente até ficar nítido, como uma baforada de fumaça que se assenta; ao sair, deve inchar de novo em um desfoque e sumir: suave e bem rápido.
Evite que o estado ampliado empurre o layout ou gere barras de rolagem e troque na hora 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).A
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
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).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).Mais em Entrance & Exit
A
Bounce In
Também chamada Bounce In Down, Bounce In Up
O elemento entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.
Onde usar
Badges de notificação e modais divertidos
Adicione uma animação de entrada "Bounce In" (também chamada bounce in down ou bounce in up) em [onde].
O elemento deve crescer a partir de pequeno, passar do tamanho total e balançar algumas vezes antes de se acomodar: rápido e elástico.
Reproduza só uma vez para não ficar chamando atenção, e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).A
O elemento quica de leve e depois encolhe ou sai voando por uma borda.
Onde usar
Fechamentos divertidos
Adicione uma animação de saída "Bounce Out" em [onde].
O elemento deve afundar um pouco, inchar um pouco além do seu tamanho e depois encolher enquanto desaparece: curto e elástico.
Tire-o do layout só depois que a animação terminar, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Clip Reveal
Também chamada Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
Um clip-path ou máscara cresce a partir de uma borda ou ponto e vai revelando a imagem ou o texto.
Onde usar
Revelação de imagens e títulos
Adicione um efeito de entrada "Clip Reveal" (também chamado mask reveal, wipe reveal ou image reveal) em [onde].
Uma borda de recorte deve varrer da esquerda para a direita, revelando o conteúdo aos poucos enquanto ele fica parado: fluido, com início e fim suaves.
Reserve o espaço do elemento desde o início para nada se deslocar, e mostre tudo revelado se o usuário preferir movimento reduzido (prefers-reduced-motion).