Gooey Effect

Uma bolha orgânica muda seu contorno continuamente.

Adicione uma animação em loop "Blob Morph" (também chamada morphing blob ou animated blob) em [onde].
Uma bolha orgânica deve mudar o contorno devagar e sem parar enquanto gira de leve, fluida e suave, sem cantos marcados.
Faça o loop ser contínuo para a forma nunca pular, e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma palavra se desfoca e se funde na próxima no mesmo lugar.

Adicione um efeito "Morphing Text" (também chamado text morph) em [onde].
Uma palavra deve se desfocar e derreter na próxima no mesmo lugar, com uma fusão suave e pegajosa, e ficar parada por um instante antes da próxima troca.
Alterne as palavras sem cortes, deixe os leitores de tela lerem as palavras como texto normal e pare a alternância se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.

Adicione um "Icon Morph" (também chamado hamburger to X ou menu icon morph) em [onde].
A cada toque, as barras de cima e de baixo devem primeiro deslizar juntas até o meio e depois girar formando um X enquanto a barra do meio some; tocar de novo inverte o movimento: rápido e ágil.
Faça dele um botão de alternância de verdade, com rótulo acessível e estado expandido que mudem junto, e mantenha o tamanho do ícone fixo para nada ao redor se deslocar.

Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.

Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.