Notification Badge Bounce

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 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 aumenta rapidamente e volta ao tamanho com um salto elástico.

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.

A imagem do produto encolhe e voa em arco até o ícone do carrinho.

Adicione uma animação "Add to Cart Fly" (também chamada fly to cart ou add-to-cart animation) em [onde].
Quando o botão de adicionar for pressionado, uma pequena cópia da imagem do produto deve encolher enquanto voa em um arco suave e rápido até o ícone do carrinho, e o carrinho deve dar um pequeno pulo ao atualizar a contagem.
Reproduza uma vez por clique sem mover o card original do produto, e pule o voo se o usuário preferir movimento reduzido (prefers-reduced-motion), mas continue atualizando o carrinho.

Um ícone de olho alterna entre aberto e riscado conforme a senha é mostrada ou ocultada.

Adicione um botão de mostrar/ocultar senha (Password Reveal Toggle) (também chamado show/hide password ou eye icon toggle) em [onde].
Ao tocar no olho, o risco deve sumir rapidamente enquanto os pontos ocultos se transformam nos caracteres reais, e tocar de novo redesenha o risco e os esconde: suave e rápido, sem quique.
Mantenha a largura do campo estável para o texto não pular, e faça do botão um botão real cujo rótulo diga se a senha está visível.

Uma seta de ponteiro desenha uma caixa de destaque em volta de uma palavra quando o texto entra na tela.

Adicione um efeito "Pointer Highlight" em [onde].
Quando o texto entrar na tela ao rolar, uma caixa deve se desenhar em volta da palavra-chave da esquerda para a direita enquanto uma pequena seta de ponteiro percorre o canto dela, suave e constante, como se alguém marcasse a palavra à mão.
Desenhe só na primeira vez que aparecer, sem deslocar o texto, e mostre a caixa pronta de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe um pouco enquanto é pressionado e volta com um quique ao soltar.

Adicione um efeito "Press (Button Tap Scale)" (também chamado tap feedback ou press state) em [onde].
Enquanto é pressionado, o elemento deve encolher um pouco e escurecer levemente, e ao soltar voltar ao tamanho normal com um pequeno quique: rápido e sutil.
Mostre o mesmo retorno no teclado e no toque, e não deixe o layout ao redor se mexer.