Estados e movimento

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/12-estados-movimento/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Conferir ponteiro e foco de teclado.
• Comparar transição, transformação e uma animação breve.

Pseudo-classes

a:hover {
  color: #c0392b;
}

a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

:hover não existe no teclado. Por isso o foco visível não é opcional. :visited pode mudar pouca coisa (cor) — o navegador limita o que você lê, por privacidade.

:first-child e :nth-child selecionam pela posição na árvore. Use com moderação: a ordem do HTML muda e o visual some.

Pare e experimente. Copie a regra a:focus-visible apresentada. Mude somente a cor do contorno para #005fcc, preveja a mudança, recarregue e percorra os links com Tab. Confira sem usar o ponteiro.

Gradientes

Gradiente é imagem gerada pelo CSS, não um arquivo.

.hero {
  background-image: linear-gradient(160deg, #c0392b, #2b2a29);
  color: #fff;
}

Dê também uma background-color de reserva, caso o gradiente falhe.

Pare e experimente. Copie o gradiente da hero. Mude só 160deg para 90deg, preveja a direção da faixa, recarregue e confira. Restaure e mantenha a cor de reserva.

Transição e animação

Transição: o navegador interpola de um valor a outro quando o estado muda.

.botao {
  background: #c0392b;
  transition: background 0.2s ease, transform 0.2s ease;
}

.botao:hover {
  background: #a93226;
}

No exemplo, movimento.js é apoio pronto para ativar a classe pulso. Você pode ler e alterar o CSS sem estudar esse JavaScript. A animação é finita: 0,3 segundo, uma execução.

@keyframes pulso {
  50% { transform: scale(1.04); }
}
.pulso { animation: pulso 0.3s 1; }

Animação: @keyframes descreve uma linha do tempo que pode repetir sozinha. Para enfeite, transicione. Para um selo que pulsa sem parar, anime — e ofereça pausa.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

Pare e experimente. Abra index.html da referência e acione Conferir movimento. Preveja que o efeito terminará em 0,3 segundo. Confira; depois ative menos movimento no sistema e repita. O aviso continua disponível mesmo sem animação.

Transformação

transform: translateY(-4px) scale(1.02) move e amplia na camada visual. Não use transform para “criar coluna”: o fluxo não acompanha. Bom para microinteração de botão.

Pare e experimente. Localize transform: translateY(-2px) na regra do botão. Mude só -2px para -4px, preveja o deslocamento e se o parágrafo seguinte se moverá, recarregue e confira. Restaure o valor.

Atividades

1. Por que hover não basta?
2. O que dispara uma transição?
3. A transformação move o conteúdo seguinte?
4. O que fazer com menos movimento?

Respostas comentadas

1. O teclado precisa de foco visível; percorra os links com Tab.
2. Uma mudança de valor, por exemplo no estado hover.
3. Não. Ela altera o desenho; o fluxo não acompanha o deslocamento.
4. Desligue animação e transição e confira a página nesse estado.

O arquivo completo

Referência do exemplo 12-estados-movimento, reproduzida aqui para que você possa conferir sem sair da página.

movimento.js

const b=document.querySelector("#mover");b.addEventListener("click",()=>{b.classList.remove("pulso");void b.offsetWidth;b.classList.add("pulso");document.querySelector("#movimento").textContent="Movimento breve conferido; nenhum envio.";});