Skew

O elemento gira alguns graus ao passar o mouse.

Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

O elemento se inclina de um lado para o outro com amplitude cada vez menor, como uma gelatina balançando.

Adicione um efeito de atenção "Jello" (também chamado jelly) em [onde].
O elemento deve se inclinar de um lado para o outro como uma gelatina balançando: forte no início e parando rapidamente.
Reproduza uma vez ao ser acionado e mantenha o espaço ocupado pelo elemento para que o conteúdo próximo não se desloque.

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

Ao passar o ponteiro, um pequeno triângulo de balão de fala aparece em um lado do elemento.

Adicione um efeito de hover de balão de fala (Speech Bubble) em [onde], também chamado bubble.
Uma pequena ponta triangular deve deslizar de trás de um lado do elemento, transformando-o em um balão de fala, e recolher quando o ponteiro sair: rápido e suave.
Mantenha a ponta da mesma cor do elemento para que pareçam uma só forma e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, uma linha de borda interna aparece dentro da borda do elemento.

Adicione um efeito de hover "Trim" em [onde].
Uma linha fina deve aparecer suavemente logo dentro da borda do elemento enquanto o ponteiro estiver sobre ele, e sumir quando sair: sutil, sem movimento.
Mantenha a linha dentro do elemento para que o tamanho dele não mude e mostre o mesmo efeito no foco do teclado.

Uma linha desliza a partir da borda inferior ou superior até o lugar, sublinhando ou sobrelinhando o elemento.

Adicione um efeito de hover "Underline Reveal" (também chamado overline reveal ou reveal) em [onde].
Uma linha de largura total deve subir deslizando até o lugar a partir de logo abaixo da borda inferior enquanto o ponteiro estiver sobre o elemento, e descer de volta para fora da vista quando sair: rápido e suave.
Recorte a linha na borda para que ela apareça deslizando, e não com fade ou crescendo, e mostre o mesmo efeito no foco do teclado.