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
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 "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).Animações parecidas
A
Pulse
Também chamada Pulsing
O elemento aumenta ou esmaece suavemente, de forma repetida.
Onde usar
Skeleton loaders, indicadores ao vivo, CTAs
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).Clique
Like / Heart Burst
Também chamada Heart animation, Twitter heart, Favorite toggle
Um ícone de coração se enche de cor e solta pequenas partículas ou pulsa ao ser clicado.
Onde usar
Botões de curtir e favoritar
Adicione uma animação "Like / Heart Burst" (também chamada heart animation ou favorite toggle) em [onde].
Ao curtir, o coração deve se encher de cor e saltar com um quique elástico enquanto um anel e pequenos pontos explodem para fora e somem, tudo rápido e divertido; ao descurtir, o coração só se esvazia discretamente.
Mantenha como um botão de alternância real com estado pressionado e reproduza a explosão só ao ativar.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).A
Passe o mouse por cima
O elemento aumenta rapidamente e volta ao tamanho com um salto elástico.
Onde usar
Ícones, botões
Adicione um efeito de hover "Pop" em [onde].
Toda vez que o ponteiro entrar, o elemento deve inchar uma vez rapidamente e voltar ao tamanho normal, como um pequeno salto elástico.
Reproduza uma vez por hover em vez de manter o tamanho maior ou repetir em loop, e evite que o layout ao redor se desloque.Mais em Emphasis
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.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).