Emphasis

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.

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 muda de escala em um ritmo de batida dupla, como um coração batendo.

Adicione um efeito "Heartbeat" (também chamado heart beat) em [onde].
O elemento deve inchar e relaxar em uma batida dupla rápida e depois descansar um instante antes da próxima, como um coração batendo.
Repita em loop contínuo mantendo a pausa entre as batidas, e pare 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.

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

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 treme rapidamente para frente e para trás em um único eixo.

Adicione um efeito "Shake" (também chamado error shake ou invalid input shake) em [onde].
O elemento deve tremer rápido para a esquerda e para a direita algumas vezes e parar exatamente onde começou: rápido e firme.
Reproduza uma vez sempre que o erro acontecer, em vez de repetir em loop, e combine com uma mensagem de erro visível para que o significado não dependa só do movimento.

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

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.