Blur In

O elemento passa de totalmente transparente a totalmente opaco no lugar, ou o contrário ao sair.

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

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

As palavras aparecem uma após a outra ao carregar a página, muitas vezes com um desfoque que se dissipa, como se estivessem sendo geradas.

Adicione um efeito "Text Generate" em [onde].
As palavras devem aparecer uma após a outra enquanto um desfoque suave se dissipa em cada uma, como se o texto estivesse sendo gerado: constante e calmo.
Reproduza só uma vez ao carregar, deixe os leitores de tela lerem o texto completo desde o início e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma versão minúscula e desfocada da imagem ocupa o lugar e fica nítida quando a imagem completa carrega.

Adicione um efeito de carregamento de imagem "Blur-Up Placeholder" (também chamado LQIP ou blur placeholder) em [onde].
Uma versão minúscula e bem desfocada da imagem deve ocupar o espaço dela na hora e, quando a imagem completa carregar, ficar nítida no lugar de forma suave e bem rápida.
Reserve o tamanho exato da imagem para que nada se desloque quando ela chegar e corte as bordas desfocadas para que não vazem para fora do quadro.

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 entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.

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

O elemento quica de leve e depois encolhe ou sai voando por uma borda.

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