Head Shake
Também chamada Headshake, No Shake
O elemento balança de um lado para o outro com uma leve rotação, como uma cabeça dizendo não.
Onde usar
Entradas inválidas ou recusas
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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.Animações parecidas
Shake
Também chamada Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
O elemento treme rapidamente para frente e para trás em um único eixo.
Onde usar
Feedback de erro em formulários
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.A
O elemento balança de um lado para o outro inclinando-se, como um objeto instável.
Onde usar
Chamar atenção para ícones ou botões
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.A
O elemento balança de um lado para o outro a partir da borda superior, como um pêndulo com amplitude cada vez menor.
Onde usar
Placas penduradas, ícones de notificação
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.A
Jello
Também chamada Jelly
O elemento se inclina de um lado para o outro com amplitude cada vez menor, como uma gelatina balançando.
Onde usar
Destaque divertido em botões ou logos
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.Mais em Emphasis
A
Heartbeat
Também chamada Heart Beat
O elemento muda de escala em um ritmo de batida dupla, como um coração batendo.
Onde usar
Ícones de curtir e favoritos, indicadores ao vivo
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).A
Ping
Também chamada Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
Uma cópia do elemento cresce e desaparece repetidamente, como uma onda de radar.
Onde usar
Pontos de notificação, status ao vivo
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).