Swirl In

O elemento entra girando em torno de um canto ou do próprio centro enquanto aparece.

Adicione uma animação de entrada "Rotate In" (também chamada rotate in down left) em [onde].
O elemento deve girar até o lugar em torno do canto inferior esquerdo, partindo de um ângulo inclinado, enquanto aparece: suave e sem pressa, desacelerando ao se assentar.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento salta de um estado pequeno e inclinado, passa do ponto e se acomoda como um boneco de mola saindo da caixa.

Adicione uma animação de entrada "Jack In The Box" em [onde].
O elemento deve saltar de um estado minúsculo e inclinado, ancorado na borda inferior, balançar de um lado para o outro passando da vertical e se acomodar: elástico e divertido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.

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

O elemento entra rolando pela esquerda como uma roda enquanto aparece.

Adicione uma animação de entrada "Roll In" em [onde].
O elemento deve entrar rolando pela esquerda como uma roda, girando enquanto se move, e aparecer ao mesmo tempo: suave, desacelerando ao chegar.
Reproduza só uma vez e mostre o elemento 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).

O elemento encolhe e esmaece até sumir.

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