tools.junyo.dev

CSS filter animado transição hover

Animando CSS filter com transition e @keyframes: técnica e boas práticas

Animações de `filter` em CSS são GPU-composited quando o elemento tem um contexto de compositing ativo (via `will-change`, `transform` ou `opacity` diferente de 1). O resultado é uma animação fluida de 60fps mesmo em dispositivos modestos. Efeitos de hover com desfoque, saturação ou glow são casos de uso muito comuns em portfólios e galeria de imagens.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

Como garantir performance nas animações de filter

  • Para animações de filter em hover, adicione `will-change: filter` ao elemento em estado de repouso. Isso cria o contexto de compositing antes do hover, eliminando a janela de "primeiro frame lento" que causa o glitch visual. Remova `will-change` quando a animação não for mais necessária (ex: ao sair do modo de galeria).
  • Não anime blur com valores muito altos (>10px) em imagens grandes. O custo de blur é proporcional ao raio ao quadrado (Gaussian blur é O(r²)). Para blur de fundo (backdrop glass effect), prefira `backdrop-filter: blur()` que é otimizado separadamente.

Efeitos de hover com filter animado

Galeria: saturação no hover

Entrada
.gallery-item img
Saída esperada
.gallery-item img { filter: grayscale(0.8) brightness(0.9); transition: filter 300ms ease-out; } .gallery-item:hover img { filter: grayscale(0) brightness(1); }

Efeito clássico de galeria: cinza em repouso, colorida no hover.

Glow neon no hover

Entrada
.neon-btn
Saída esperada
.neon-btn { filter: none; transition: filter 200ms ease; } .neon-btn:hover { filter: drop-shadow(0 0 8px rgba(61,220,151,.8)) drop-shadow(0 0 20px rgba(61,220,151,.4)); }

Glow com drop-shadow duplo. Funciona em SVG e PNG transparente.

FAQ da ferramenta completa

É uma propriedade que aplica efeitos gráficos como blur, ajuste de cor, saturação e sombra sobre um elemento inteiro. Funciona em imagens, texto, ícones e qualquer elemento HTML.

Perguntas frequentes

filter e backdrop-filter são a mesma coisa?

Não. `filter` afeta o elemento e seu conteúdo. `backdrop-filter` afeta o que está atrás do elemento (útil para efeitos de vidro/glass em UI). Ambos aceitam as mesmas funções, mas são aplicados em camadas diferentes da composição.

Posso animar backdrop-filter também?

Sim, mas com mais cuidado. `backdrop-filter` é mais custoso que `filter` porque precisa amostrar e reprocessar os pixels do fundo. Em animações longas ou em dispositivos móveis com telas grandes, pode causar quedas de frame. Teste com o performance profiler.