Circular Reveal

Ao passar o mouse, um círculo colorido cresce a partir do centro ou encolhe em direção a ele para preencher o elemento.

Adicione um efeito de hover "Radial Fill" (também chamado circle expand) em [onde].
Um círculo da nova cor deve crescer suavemente a partir do centro até preencher o elemento, e encolher de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o círculo recortado dentro da forma do elemento e o texto acima dele, e mostre o mesmo efeito no foco do teclado.

Uma onda circular se expande e some a partir do ponto exato do clique ou toque.

Adicione um efeito "Ripple" (também chamado material ripple ou ink ripple) em [onde].
A cada clique ou toque, uma onda circular suave deve se espalhar a partir do ponto exato pressionado até cobrir o elemento, sumindo enquanto cresce: rápida e leve.
Recorte a onda no formato do elemento, deixe cada toque rápido iniciar sua própria onda e faça ela começar do centro quando acionada pelo teclado.

Um clip-path ou máscara cresce a partir de uma borda ou ponto e vai revelando a imagem ou o texto.

Adicione um efeito de entrada "Clip Reveal" (também chamado mask reveal, wipe reveal ou image reveal) em [onde].
Uma borda de recorte deve varrer da esquerda para a direita, revelando o conteúdo aos poucos enquanto ele fica parado: fluido, com início e fim suaves.
Reserve o espaço do elemento desde o início para nada se deslocar, e mostre tudo revelado se o usuário preferir movimento reduzido (prefers-reduced-motion).

A página antiga desaparece com fade enquanto a nova aparece com fade na mesma área.

Adicione uma "Crossfade Page Transition" (também chamada cross-dissolve ou fade transition) em [onde].
Ao navegar, a página antiga deve desaparecer com fade enquanto a nova aparece ao mesmo tempo na mesma área: suave e bem rápida.
Mantenha as duas páginas no mesmo lugar para que nada se desloque durante o fade e mova o foco para o título principal da nova página após a troca.

Painéis sólidos varrem a tela para cobrir a página antiga e depois se recolhem para revelar a nova.

Adicione uma transição de página "Curtain / Panel Wipe" (também chamada page wipe ou staggered panels) em [onde].
Painéis sólidos devem varrer a tela um após o outro para cobrir a página antiga, a página deve trocar enquanto está totalmente coberta e os painéis devem seguir até sair de vista para revelar a nova: marcante e fluida.
Nunca mostre a nova página antes de os painéis cobrirem a antiga e use um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

O conteúdo que sai desaparece por completo com fade e depois o que entra aparece com fade e uma leve escala.

Adicione uma transição de página "Fade Through" (também chamada fade-through transition ou out-in route transition) em [onde].
Primeiro, o conteúdo que sai deve desaparecer com fade, rápido e por completo; depois, o que entra deve aparecer com fade enquanto cresce levemente até o seu lugar.
Nunca deixe os dois se sobreporem e evite que o layout do conteúdo que entra se desloque enquanto ele escala.