Jello

O elemento se estica na horizontal e se achata na vertical em etapas elásticas antes de voltar ao normal.

Adicione um efeito de atenção "Rubber Band" (também chamado rubberband) em [onde].
O elemento deve se esticar na largura e se achatar na altura, depois voltar em alguns passos elásticos menores até parar no tamanho normal.
Reproduza uma vez ao ser acionado e não deixe o layout ao redor se deslocar enquanto ele estica.

O elemento balança de um lado para o outro inclinando-se, como um objeto instável.

Adicione um efeito de atenção "Wobble" em [onde].
O elemento deve balançar de um lado para o outro inclinando-se, começando com um balanço grande que diminui a cada ida e volta até parar.
Reproduza uma vez ao ser acionado e não deixe o conteúdo vizinho se deslocar.

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 balança de um lado para o outro com uma leve rotação, como uma cabeça dizendo não.

Adicione um efeito de atenção "Head Shake" (também chamado headshake ou no shake) em [onde].
O elemento deve virar rápido de um lado para o outro com uma leve torção, como uma cabeça dizendo não, cada virada menor que a anterior até parar.
Reproduza uma vez a cada acionamento, por exemplo em uma ação recusada, e não deixe o layout ao redor se mover.

Uma cópia do elemento cresce e desaparece repetidamente, como uma onda de radar.

Adicione um efeito "Ping" (também chamado radar ping ou pulse ring) em [onde].
Uma cópia do elemento deve crescer para fora e desaparecer, de novo e de novo em ritmo constante, enquanto o próprio elemento fica parado.
Desenhe o anel em uma camada separada para que ele nunca altere o layout, e pare o loop se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento aumenta ou esmaece suavemente, de forma repetida.

Adicione um efeito "Pulse" (também chamado pulsing) em [onde].
O elemento deve crescer suavemente e voltar em um ritmo lento e constante: sutil, sem efeito de quique.
Repita em loop contínuo sem deslocar o layout ao redor, e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).