EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

CSS Transition e Filter

CSS Transition

Transition é a maneira mais simples de animar CSS — especifique quais propriedades mudam suavemente, quanto tempo, e qual temporização.

Propriedades de Transition

Propriedade Valores Finalidade
transition-property all, color, transform Quais propriedades animam
transition-duration 0.3s, 500ms Quanto tempo a transição leva
transition-timing-function ease, linear, ease-in, ease-out Curva de velocidade
transition-delay 0s, 0.2s Atraso antes de começar
transition all 0.3s ease Abreviação

Exemplo

HTML 
<style>
.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}
</style>
<button class="button">Hover me</button>
▶ Experimente

CSS Filter

Filtros aplicam efeitos visuais aos elementos:

Funções de Filtro

Função Valores Efeito
blur() 5px, 10px Desfoque gaussiano
brightness() 0.5, 1.5 Mais escuro/claro
contrast() 0.5, 2 Menos/mais contraste
grayscale() 0%, 100% Quantidade de escala de cinza
hue-rotate() 90deg, 180deg Rotacionar matiz
invert() 0%, 100% Inverter cores
opacity() 0.5, 1 Transparência
saturate() 0.5, 2 Menos/mais saturado
sepia() 0%, 100% Tom sépia

Exemplo

HTML 
<style>
.image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.image:hover {
  filter: grayscale(0%);
}
</style>
<img class="image" src="/assets/images/tutorials/html-example-photo.webp" alt="Foto">
▶ Experimente

Combinando Transition + Filter

Exemplo

HTML 
<style>
.card {
  filter: blur(2px) brightness(0.8);
  transition: filter 0.5s ease;
}
.card:hover {
  filter: blur(0) brightness(1);
}
</style>
<div class="card">Hover para nitidez e brilho</div>
▶ Experimente

❓ Perguntas Frequentes

Q Qual é a diferença entre transition e animation?
R transition precisa de um gatilho (como hover) e apenas vai do estado A ao estado B — sem loops. animation não precisa de gatilho, pode reproduzir automaticamente, suporta múltiplos quadros-chave, loops e reversão. Interações simples usam transition; efeitos complexos de reprodução automática usam animation.
Q Todas as propriedades CSS podem ser transicionadas?
R Não. Apenas algumas propriedades suportam transições. Melhor desempenho com `transform` e `opacity` — navegadores podem acelerar GPU. Não anime `width`, `height`, `top`, `left` — causa reflow e travamento.
Q filter: blur() causa problemas de desempenho?
R Sim. blur é intensivo em GPU — blur de grande área causa quedas de desempenho. Melhor usar blur apenas em pequenos elementos, ou apenas em interações curtas como hover. Não aplique blur em vídeos ou imagens grandes.

📖 Resumo

📝 Exercícios

  1. Crie um botão que muda cor de fundo em 0.3s no hover, com leve aumento de escala.
  2. Crie uma galeria de imagens: imagens mostram escala de cinza por padrão, tornam-se coloridas suavemente no hover.
  3. Crie uma "animação de sublinhado de navegação" — linha inferior expande do centro no hover.
  4. Use filter + transition para tornar imagens mais claras e levemente desfocadas no hover.
100%