Underline Reveal

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.

Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.

Adicione um efeito de hover "Overline Grow" em [onde].
Uma linha acima do texto deve crescer do centro para os dois lados enquanto o ponteiro estiver sobre ele, e encolher de volta ao centro quando sair: rápido e suave.
Reserve espaço para a linha para o texto não se mexer, e mostre o mesmo efeito no foco do teclado.

Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.

Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.

Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.

Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).

O card se desloca e muda levemente de escala conforme o ponteiro se move sobre ele.

Adicione um efeito "Wobble Card" em [onde].
Quando o ponteiro se mover sobre o card, ele deve se deslocar um pouco em direção ao ponteiro enquanto o conteúdo se desloca um pouco no sentido oposto com um leve aumento de escala, acompanhando com suavidade, e tudo volta ao lugar quando o ponteiro sair.
Mantenha o movimento pequeno e desative-o em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um fundo colorido entra varrendo a partir de uma borda com um leve exagero elástico.

Adicione um efeito de hover "Background Bounce Sweep" em [onde].
Uma nova cor de fundo deve entrar varrendo a partir de uma borda, passar um pouco da borda oposta com um quique elástico e então se assentar, enquanto a cor do texto muda para continuar legível; ao sair, ela desliza de volta suavemente.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

As cores do fundo e do texto fazem uma transição suave para uma nova cor ao passar o mouse.

Adicione um efeito de hover "Background Fade" (também chamado color fade) em [onde].
As cores do fundo e do texto devem fazer uma transição suave para novas cores enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: calmo, sem movimento.
Mantenha contraste suficiente entre texto e fundo nos dois estados e mostre o mesmo efeito no foco do teclado.