Aula 19 — Transições e animações no CSS

Movimento bem aplicado melhora a experiência do usuário. Ele ajuda a indicar ações, mudanças de estado e foco visual.

Nesta aula, você vai aprender a usar transições e animações com equilíbrio e intenção.

Quando usar movimento?

Movimento no CSS deve:

• Guiar o olhar do usuário
• Indicar interação
• Dar feedback visual

Transições no CSS

Transições permitem que uma mudança de estilo aconteça de forma suave.

Elas são muito usadas em :hover, :focus e mudanças de estado.

Propriedade transition

A forma mais simples de criar uma transição:

 .botao { background-color: #428bca; transition: background-color 0.3s ease; }

.botao:hover {
background-color: #2c3e50;
}

Anatomia da Propriedade transition

A linha transition: background-color 0.3s ease; é um atalho para quatro propriedades diferentes:

transition-property (background-color): Diz ao navegador qual propriedade deve ser animada. Neste caso, apenas a cor de fundo. Se você quisesse animar tudo (como largura ou bordas), usaria all.

transition-duration (0.3s): Define quanto tempo a animação dura. 0.3s (300 milissegundos) é o padrão de ouro para interfaces; é rápido o suficiente para parecer responsivo, mas lento o suficiente para ser percebido.

transition-timing-function (ease): Define o "ritmo" da animação. O ease começa devagar, acelera no meio e termina devagar, dando um aspecto mais natural e menos mecânico.

O Gatilho (:hover)

A transição não acontece sozinha. Ela precisa de uma mudança de estado. Quando o mouse entra no elemento (:hover), o valor da cor muda, e o navegador, ao detectar a propriedade transition na classe base, calcula todos os quadros intermediários entre o azul original e o cinza final.

Quando o mouse passa sobre o botão, a cor muda suavemente.

O que pode ser animado?

Nem toda propriedade aceita transição. As mais comuns são:

• color
• background-color
• opacity
• transform

Atalho de transição

A propriedade transition pode ser escrita de forma resumida:

 .card { transition: all 0.2s ease-in-out; } 

Funções de tempo (easing)

As funções de tempo controlam a sensação do movimento.

• ease
• ease-in
• ease-out
• linear

Elas fazem o movimento parecer mais natural.

Animações com @keyframes

Quando precisamos de movimentos mais complexos, usamos animações.

 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.elemento {
animation: fadeIn 0.6s ease;
}

Essa animação faz o elemento aparecer suavemente.

Propriedades de animação

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count

 .loader { animation: girar 1s linear infinite; } 

Animação não é interação

Use animações para:

• Carregamentos
• Feedback visual
• Entrada suave de elementos

Acessibilidade e movimento

Algumas pessoas são sensíveis a animações excessivas.

O CSS permite respeitar isso:

 @media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } } 

Na próxima aula, vamos falar sobre boas práticas e organização do CSS — como escrever CSS que envelhece bem 🧠🧹