CSS: CSS Transition e Filter

1. CSS Transition

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

(1) 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

2. CSS Filter

Filtros aplicam efeitos visuais aos elementos:

(1) 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

3. 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

P 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.

P 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.

P 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

Transition é a forma mais simples de animação CSS — especifique quais propriedades animam, duração e temporização
Filtros fornecem processamento poderoso de imagens — blur, escala de cinza, ajustes de cor
Combinar ambos (como efeitos de filtro em hover) cria feedback interativo rico

📝 Exercícios

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

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós