Flip Out

O elemento gira em 3D no eixo horizontal ou vertical, de lado até ficar de frente para quem vê.

Adicione uma animação de entrada "Flip In" (também chamada flip in X ou flip in Y) em [onde].
O elemento deve começar de lado e girar no eixo horizontal até ficar de frente, passando um pouco do ponto e voltando antes de se acomodar: rápido, com uma pequena oscilação.
Dê perspectiva para o giro parecer ter profundidade, e mostre de frente sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento dá uma volta completa no eixo Y enquanto se aproxima um pouco de quem vê e volta.

Adicione uma animação "Flip" em [onde].
O elemento deve dar uma volta completa no seu eixo vertical enquanto se aproxima um pouco de quem vê, e depois voltar com uma leve diminuição de tamanho: animado, mas breve.
Dê perspectiva para o giro parecer ter profundidade, reproduza só uma vez em vez de em loop, e pule o giro 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).

O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.

Adicione uma animação de saída "Hinge" em [onde].
O elemento deve despencar a partir do canto superior esquerdo como se um parafuso tivesse se soltado, balançar para lá e para cá e depois cair para fora da tela enquanto desaparece: lento, cômico e deliberado.
Deixe-o cair por cima do resto do conteúdo sem empurrar o layout nem criar barras de rolagem, remova depois que ele cair, e oculte na hora 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 entra disparado pela lateral, inclinado, e se endireita ao chegar.

Adicione uma animação de entrada "Light Speed In" (também chamada lightspeed in) em [onde].
O elemento deve entrar rápido pela lateral, inclinado como se estivesse em alta velocidade, corrigir demais a inclinação uma vez e se endireitar ao chegar: rápido e marcante, desacelerando no fim.
Evite que ele gere uma barra de rolagem horizontal enquanto ainda está fora da tela e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).