Radial Fill

A nova visualização é revelada dentro de um círculo que se expande a partir do ponto do clique.

Adicione uma transição "Circular Reveal" (também chamada clip-path circle expand ou theme toggle reveal) em [onde].
A nova visualização deve aparecer dentro de um círculo que cresce a partir do controle pressionado até cobrir toda a área: suave e constante, acelerando e desacelerando com suavidade.
Faça o círculo começar exatamente onde o controle foi pressionado e troque na hora, sem círculo, se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

Ao passar o mouse, um retângulo se expande ou se contrai dentro do elemento para mudar o fundo.

Adicione um efeito de hover "Rectangle Fill" em [onde].
A nova cor de fundo deve se fechar a partir das quatro bordas conforme um retângulo interno encolhe em direção ao centro, e voltar a se abrir quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o fundo se abre ou se fecha como persianas, a partir do centro ou das bordas.

Adicione um efeito de hover "Shutter Fill" (também chamado shutter) em [onde].
A nova cor de fundo deve se abrir a partir de uma linha vertical no centro para os dois lados, como persianas, e se fechar de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o preenchimento recortado dentro do elemento e o texto por cima, e mostre o mesmo efeito no foco do teclado.

O elemento gira alguns graus ao passar o mouse.

Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

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.