Swing
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
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 "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.Animações parecidas
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
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
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.A
O elemento gira em uma dobradiça no canto superior esquerdo, balança e depois cai para fora da tela.
Onde usar
Remoção de um elemento em estilo cômico
Adicione uma animação de saída "Hinge" em [onde].
O elemento deve despencar a partir do canto superior esquerdo como se um parafuso tivesse se soltado, balançar para lá e para cá e depois cair para fora da tela enquanto desaparece: lento, cômico e deliberado.
Deixe-o cair por cima do resto do conteúdo sem empurrar o layout nem criar barras de rolagem, remova depois que ele cair, e oculte na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Passe o mouse por cima
O elemento gira alguns graus ao passar o mouse.
Onde usar
Ícones, miniaturas
Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.Mais em Emphasis
A
O elemento cresce, balança com rotação e volta ao tamanho original, como uma pequena comemoração.
Onde usar
Estados de sucesso, comemorações
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).Vibrate
Também chamada Vibration, Buzz
O elemento treme rapidamente em pequenos solavancos em várias direções, como um celular vibrando.
Onde usar
Alertas, avisos no estilo de chamada recebida
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.