Wobble

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

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 pula para cima e para baixo em quiques que vão perdendo força.

Adicione um efeito de atenção "Bounce" em [onde].
O elemento deve pular e cair de volta em alguns quiques rápidos, cada vez menores, com um leve achatamento ao aterrissar.
Reproduza só uma vez quando acionado, em vez de em loop, e não aplique para usuários que preferem movimento reduzido.

O elemento pisca alternando rapidamente a opacidade.

Adicione um efeito de atenção "Flash" (também chamado blink) em [onde].
O elemento deve piscar sumindo e reaparecendo rapidamente duas vezes e depois ficar totalmente visível.
Reproduza só uma vez, em vez de piscar sem parar, e não aplique para usuários que preferem movimento reduzido, pois piscadas rápidas podem incomodar.

A opacidade do elemento oscila de forma irregular, como uma luz falhando.

Adicione um efeito "Flicker" (também chamado flickering) em [onde].
O elemento deve ficar estável na maior parte do tempo e escurecer em falhas curtas e irregulares, como um neon com defeito.
Mantenha o ritmo irregular em vez de uniforme, evite piscadas rápidas em intensidade máxima e pare o efeito para usuários que preferem movimento reduzido.