Também chamada Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
Uma bolha orgânica muda seu contorno continuamente.
Onde usar
Fundos, avatares e botões
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).
Também chamada Hamburger to X, Menu Icon Morph, Line-to-Close Icon
Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.
Onde usar
Botões de abrir e fechar menu
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.
Também chamada Text Morph
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).
Os cantos do elemento se arredondam suavemente ao passar o ponteiro.
Adicione um efeito de hover "Round Corners" em [onde].
Os cantos retos do elemento devem se arredondar suavemente enquanto o ponteiro estiver sobre ele e voltar a ficar retos quando sair: suave e rápido.
Mantenha o tamanho do elemento inalterado e mostre o mesmo efeito no foco do teclado.