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
Variações
- center
- down
- left
- right
- up
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 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).Animações parecidas
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
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
Back In
Também chamada Back In Up, Back In Down
O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.
Onde usar
Elementos hero e cards
Adicione uma animação de entrada "Back In" (também chamada back in up ou back in down) em [onde].
O elemento deve chegar de fora de uma borda, reduzido e levemente transparente, e crescer até o tamanho total ao alcançar seu lugar: um movimento deliberado em duas etapas, não um surgimento rápido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Passe o mouse por cima
Grow
Também chamada Scale Up, Zoom In on hover
O elemento aumenta um pouco, de forma suave, quando o ponteiro está sobre ele.
Onde usar
Botões, links, miniaturas
Adicione um efeito de hover "Grow" (também chamado scale up) em [onde].
O elemento deve aumentar um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.Mais em Entrance & Exit
A
Zoom Out
Também chamada Scale Out
O elemento encolhe e esmaece até sumir.
Onde usar
Fechamento de modais e descarte de itens
Adicione uma animação de saída "Zoom Out" (também chamada scale out) em [onde].
O elemento deve encolher em direção ao centro enquanto esmaece até sumir: rápido, acelerando ao sair.
Tire-o do layout e do foco do teclado só depois que ele sumir e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).A
O elemento encolhe e desliza em direção a uma borda enquanto desaparece.
Onde usar
Descartar cards
Adicione uma animação de saída "Back Out" em [onde].
O elemento deve primeiro encolher um pouco no lugar e depois deslizar em direção a uma borda enquanto desaparece: uma saída deliberada em duas etapas, não um único fade rápido.
Remova o elemento só depois que a animação terminar, para o layout não pular no meio do movimento, e remova na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).