Line Drawing

Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.

Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

Um círculo e um tique se desenham sozinhos para confirmar que a ação deu certo.

Adicione uma animação "Success Checkmark" (também chamada animated success tick) em [onde].
Um círculo deve se desenhar em um único traço suave, depois o tique se desenha dentro dele e o símbolo inteiro dá um pequeno salto suave: calmo e confiante.
Reproduza uma vez quando a ação der certo, acompanhe com uma mensagem de texto que leitores de tela possam anunciar, e mostre o símbolo pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.

Adicione um efeito de hover "Underline Draw" (também chamado de animated underline ou hover underline animation) em [onde].
Quando o ponteiro estiver sobre o link, um sublinhado deve crescer suavemente da esquerda para a direita sob o texto e encolher de novo quando o ponteiro sair: rápido e sutil.
Evite que o sublinhado desloque o layout ao redor e mostre o mesmo efeito no foco do teclado.

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.

Pequenos círculos ou ícones giram em torno de um centro em órbitas circulares.

Adicione "Orbiting Circles" (também chamado orbit animation ou orbiting icons) em [onde].
Pequenos círculos devem girar devagar e de forma constante em volta de um elemento central em anéis circulares, com o anel externo girando no sentido contrário e mais devagar.
Mantenha o loop contínuo e os itens em órbita sempre em pé, e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma forma vetorial se transforma suavemente em outra.

Adicione um "Shape Morph" (também chamado path morphing ou SVG morph) em [onde].
Uma forma deve se transformar suavemente em outra, por exemplo um pentágono que se afina até virar uma estrela, com os pontos deslizando para o lugar em ritmo uniforme e sem pressa.
Dê às duas formas o mesmo número de pontos correspondentes para a transformação ficar limpa e sem cintilação, e reproduza uma vez a cada mudança de estado em vez de em loop.