Zoom Out

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.

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

O elemento encolhe e desliza em direção a uma borda enquanto desaparece.

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

O elemento fica cada vez mais desfocado enquanto desaparece ou desliza para fora.

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

O elemento diminui um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Shrink" (também chamado scale down) em [onde].
O elemento deve diminuir 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.

O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.

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

O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.

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