Light Speed In

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 se inclina para o lado ao passar o ponteiro.

Adicione um efeito de hover "Skew" em [onde].
O elemento deve se inclinar para o lado até ficar levemente enviesado enquanto o ponteiro estiver sobre ele, e se endireitar quando sair: rápido e suave.
Mantenha o texto legível enquanto estiver inclinado, evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.

Adicione uma animação de entrada "Back In" (também chamada back in up ou back in down) em [onde].
O elemento deve chegar de fora de uma borda, reduzido e levemente transparente, e crescer até o tamanho total ao alcançar seu lugar: um movimento deliberado em duas etapas, não um surgimento rápido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento 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 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).

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