Shake

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.

O elemento treme rapidamente em pequenos solavancos em várias direções, como um celular vibrando.

Adicione um efeito de atenção "Vibrate" (também chamado buzz ou vibration) em [onde].
O elemento deve tremer em solavancos minúsculos e rápidos em várias direções por um breve momento, como um celular vibrando, e depois parar.
Mantenha o movimento bem pequeno para que o conteúdo continue legível, e reproduza uma vez por alerta em vez de repetir em loop.

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 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 gira continuamente em velocidade constante.

Adicione um efeito "Spin" (também chamado spinner ou rotate loop) em [onde].
O elemento deve girar continuamente em uma velocidade constante e uniforme, sem easing entre as voltas.
Deixe o loop contínuo, dê ao spinner um rótulo de carregamento acessível, e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento balança de um lado para o outro a partir da borda superior, como um pêndulo com amplitude cada vez menor.

Adicione um efeito de atenção "Swing" em [onde].
O elemento deve balançar de um lado para o outro como uma placa pendurada, começando com um balanço amplo que diminui rápido.
Faça o elemento girar a partir da borda superior, e não do centro, e reproduza uma vez ao ser acionado.

O elemento cresce, balança com rotação e volta ao tamanho original, como uma pequena comemoração.

Adicione um efeito de atenção "Tada" em [onde].
O elemento deve diminuir um pouco, depois crescer e balançar de um lado para o outro com uma inclinação rápida antes de voltar ao tamanho normal, como uma pequena comemoração.
Reproduza uma vez, por exemplo logo após um sucesso, e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).