Bounce
Também chamada Bounce (attention)
O elemento pula para cima e para baixo em quiques que vão perdendo força.
Onde usar
Indicações para rolar a página, botões de call to action
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 "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.Animações parecidas
A
Passe o mouse por cima
Bob
Também chamada Hang
O elemento sobe e depois balança para cima e para baixo sem parar enquanto está sob o mouse.
Onde usar
Ícones, botões
Adicione um efeito de hover "Bob" (também chamado hang) em [onde].
O elemento deve subir um pouco e depois continuar balançando suavemente para cima e para baixo enquanto o ponteiro estiver sobre ele, e descer de volta quando o ponteiro sair: lento e suave.
Repita o balanço só durante o hover e deixe o elemento parado se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Bounce In
Também chamada Bounce In Down, Bounce In Up
O elemento entra com um quique que passa do ponto e se acomoda, crescendo ou caindo a partir de uma borda.
Onde usar
Badges de notificação e modais divertidos
Adicione uma animação de entrada "Bounce In" (também chamada bounce in down ou bounce in up) em [onde].
O elemento deve crescer a partir de pequeno, passar do tamanho total e balançar algumas vezes antes de se acomodar: rápido e elástico.
Reproduza só uma vez para não ficar chamando atenção, e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).3
Notification Badge Bounce
Também chamada Badge pop, Badge pulse, Ping
Um selo de contagem surge, quica ou pulsa quando chega uma nova notificação.
Onde usar
Ícone de sino, caixa de entrada
Adicione uma animação "Notification Badge Bounce" (também chamada badge pop ou ping) em [onde].
Quando chegar uma nova notificação, o selo de contagem deve surgir do nada e se assentar com um ou dois quiques rápidos e elásticos, enquanto um anel suave se expande a partir dele uma vez.
Reproduza uma vez por notificação nova em vez de em loop, e anuncie a nova contagem para leitores de tela.Mais em Emphasis
Flash
Também chamada Blink
O elemento pisca alternando rapidamente a opacidade.
Onde usar
Alertar sobre conteúdo novo
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.ABC
Flicker
Também chamada Flickering
A opacidade do elemento oscila de forma irregular, como uma luz falhando.
Onde usar
Efeitos de neon e glitch
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.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.