Transições
A diferença entre uma cor que troca de forma brusca e uma que troca suavemente é uma única propriedade: transition.
Estudar esta lição interativa →Por padrão, quando o :hover muda uma propriedade, essa mudança acontece instantaneamente, num único quadro. A propriedade transition, escrita no estado normal do elemento (não dentro do :hover), diz ao navegador para animar essa mudança suavemente ao longo de um tempo, em vez de trocar de uma vez.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. transition: background-color .25s ease, transform .25s ease no estado normal faz as mudanças do :hover acontecerem suavemente.
transition recebe, no mínimo, qual propriedade animar e por quanto tempo: transition: background-color .25s ease; anima a cor de fundo ao longo de um quarto de segundo, com uma curva de aceleração suave (ease). É possível animar várias propriedades ao mesmo tempo, separadas por vírgula, como no exemplo acima.
Colocar o transition dentro da regra :hover, em vez de na regra do estado normal, faz a transição funcionar só "de ida" (ao entrar no hover), mas a saída (voltar ao estado normal) acontece de forma brusca. A propriedade transition precisa estar no estado normal do elemento para animar suavemente nos dois sentidos.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione transition na regra normal do botão.