CSS filter animado transição hover
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.
Cinza sutil em repouso, cor completa no hover. Repare que as duas funções aparecem nos dois estados, na mesma ordem.
Um único drop-shadow já cria glow perceptível. Para um glow em duas camadas, escreva drop-shadow() duas vezes manualmente na mesma lista.
Aquece levemente a imagem sem alterar o brilho de forma perceptível. Boa alternativa ao zoom simples em capas de artigo.
É 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.
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.
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.
O motivo mais comum é ter funções diferentes nos dois estados. Se o repouso usa `blur(0px)` (que o navegador otimiza para 'nenhum filtro') e o hover usa `grayscale(100%)`, não há um par numérico comum para interpolar, então o browser troca de estado sem transição. Declare a mesma função, com o mesmo valor neutro, no estado de repouso.
filter: none;O CSS é gerado localmente no navegador.