Add to Cart Fly

Um elemento percorre um caminho curvo personalizado e pode girar para acompanhá-lo.

Adicione uma animação "Motion Path" (também chamada animate along path) em [onde].
Um elemento pequeno deve percorrer uma rota curva personalizada em ritmo lento e constante, girando para ficar de frente para a direção em que se move.
Use uma rota fechada para o loop se repetir sem saltos, e faça a rota se ajustar ao contêiner em vez de ficar com tamanho fixo.

Um selo de contagem surge, quica ou pulsa quando chega uma nova notificação.

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.

Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.

Adicione uma animação "Checkbox Check Draw" (também chamada animated checkbox ou checkmark draw) em [onde].
Quando a caixa for marcada, ela deve se preencher de cor e o sinal de visto deve se desenhar sozinho em um traço rápido e suave; ao desmarcar, ele se apaga do mesmo jeito.
Mantenha como um checkbox de verdade, com seu estado de marcado, funcionando pelo teclado e com um anel de foco visível.

Pedaços de papel coloridos explodem e caem para comemorar um sucesso.

Adicione uma comemoração de confete (Confetti) em [onde], também chamada confetti burst.
Pequenos pedaços de papel coloridos devem explodir rapidamente do botão e depois girar e cair flutuando enquanto desaparecem, em uma chuva curta e animada.
Dispare uma vez por sucesso em vez de repetir em loop, não deixe bloquear os cliques na página e não mostre se o usuário preferir movimento reduzido (prefers-reduced-motion).

O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.

Adicione uma animação "Copy-to-Clipboard Feedback" (também chamada copied state ou copy icon to checkmark) em [onde].
Quando o botão de copiar for pressionado, o ícone de copiar deve encolher rapidamente enquanto um sinal de visto é desenhado e o rótulo muda para "Copiado"; depois de um breve momento, tudo volta suavemente.
Mantenha o botão do mesmo tamanho durante a troca para que nada se desloque e anuncie o estado de copiado para leitores de tela.