Roll 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 desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.

Adicione uma animação de entrada "Slide In" (também chamada slide in left, slide in right, slide in up ou slide in down) em [onde].
O elemento deve deslizar de fora da borda do contêiner até o lugar, totalmente opaco o tempo todo: rápido, desacelerando suavemente e sem quique.
Corte-o na borda do contêiner para que não sobreponha os vizinhos nem gere barras de rolagem enquanto está fora e mostre-o no lugar se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sai rolando para a direita enquanto desaparece.

Adicione uma animação de saída "Roll Out" em [onde].
O elemento deve sair rolando para a direita como uma roda, girando enquanto se move, e desaparecer ao mesmo tempo: suave, acelerando ao sair.
Tire-o do layout só depois que ele terminar de rolar e esconda-o na hora 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).

O elemento gira em torno de um ponto de apoio enquanto desaparece.

Adicione uma animação de saída "Rotate Out" em [onde].
O elemento deve girar em torno do centro, um pouco mais de meia volta, enquanto desaparece: suave, acelerando ao sair.
Remova-o só depois que o giro terminar e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).