Slide Out

O elemento desaparece enquanto se desloca em uma direção.

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

O elemento se inclina e sai em disparada para o lado enquanto desaparece.

Adicione uma animação de saída "Light Speed Out" (também chamada lightspeed out) em [onde].
O elemento deve se inclinar e sair em disparada para o lado enquanto desaparece: rápido, acelerando ao sair.
Evite que ele gere uma barra de rolagem horizontal ao passar pela borda e esconda-o 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).

Um cabeçalho se esconde ao rolar para baixo e reaparece ao rolar para cima.

Adicione um "Hide on Scroll Header" (também chamado headroom ou auto-hide navbar) em [onde].
O cabeçalho deve deslizar para cima e sair de vista quando o leitor rolar para baixo, e voltar a qualquer rolagem para cima: rápido e suave, reagindo à direção e não à distância.
Mostre sempre no topo da página, ignore pequenas oscilações de rolagem, e mantenha visível enquanto algo dentro dele tiver o foco do teclado.

Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.

Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira e cresce a partir de um ponto enquanto aparece.

Adicione uma animação de entrada "Swirl In" (também chamada swirl in forward) em [onde].
O elemento deve girar bem mais de uma volta completa enquanto cresce de um único ponto até o tamanho total e aparece: rápido no início, desacelerando ao se assentar.
Reproduza só uma vez em um único elemento, não em um grupo inteiro, e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.

Adicione uma animação de texto "Tracking In" (também chamada text tracking in ou letter-spacing in) em [onde].
As letras devem começar bem espaçadas e apagadas e se aproximar até o espaçamento normal enquanto ficam totalmente visíveis: suave, desacelerando no fim.
Mantenha o texto centralizado e em uma única linha enquanto o espaçamento muda, para o layout ao redor não se mexer, e mostre-o com espaçamento normal se o usuário preferir movimento reduzido (prefers-reduced-motion).