filter动画必须用transition而非animation，因浏览器对多函数filter的keyframes插值支持差；需统一filter链、显式声明默认值、写全transition语法，并用will-change: filter或transform: translatez(0)优化渲染。
filter 动画必须用 transition 而不能靠 animation 关键帧硬写
浏览器对 filter 的过渡支持依赖于 CSS 属性是否可插值，而 filter 本身是可插值的——但前提是用 transition 触发状态变化。直接写 @keyframes 切换不同 filter 值（比如从 grayscale(0) 到 blur(2px) hue-rotate(90deg)）在部分 Chrome 版本和 Safari 中会跳变或卡顿，因为浏览器无法自动对多个滤镜函数做线性合成插值。
- 只对单个 filter 函数做过渡最稳：比如只改
blur(0px) → blur(4px)或opacity → filter: opacity(0.8) - 多个函数混用时，必须保证前后声明顺序、数量、类型完全一致，否则 transition 会失效（例如从
grayscale(0) contrast(1)切到blur(2px) saturate(1.5)，浏览器无法映射对应关系） - 推荐写法：统一用完整 filter 链，初始/终态都显式写出所有项，缺位补默认值，如
filter: grayscale(0) blur(0) brightness(1) contrast(1);
transition 写在哪？别只写 filter，要加 duration 和 timing-function
只写 transition: filter; 是无效的——CSS 要求明确指定持续时间和缓动函数，否则浏览器按默认 0s 处理，等于没过渡。
- 必须写全：
transition: filter 0.3s ease-in-out;（0.3s是肉眼可感知又不拖沓的常见值） - 不要把
transition写在伪类里（如:hover），应写在常态选择器上，否则首次悬停无过渡 - 如果同时控制多个属性（比如 opacity + filter），可以合并写：
transition: opacity 0.3s, filter 0.3s;，避免重复声明 - Safari 对
transition缩写支持较弱，建议始终用完整语法，不省略单位或函数名
图片模糊过渡时出现边缘闪烁或锯齿
这是 blur() 滤镜在重绘时的典型渲染缺陷，尤其在高 DPI 屏幕或缩放页面下明显。根本原因是 GPU 加速未启用或图层合成策略不当。
- 强制开启硬件加速：
transform: translateZ(0);或will-change: filter;（后者更精准，但慎用，仅加在需要过渡的元素上） - 避免在
blur()同时叠加scale()或rotate()，这些变换会触发额外的图层重建，加剧闪烁 - 如果图片是
<img>标签，确保其容器有明确宽高，且未设置object-fit: cover等可能引发重绘的属性 - Chrome 115+ 对
blur()渲染做了优化，但旧版仍需靠-webkit-backface-visibility: hidden;辅助稳定
filter 兼容性与降级处理很现实
filter 在 IE 完全不支持，Edge 12–17 支持有限（不支持 drop-shadow() 和多函数链），iOS Safari 9+ 才开始稳定支持完整语法。纯靠 CSS 实现“无 JS 降级”几乎不可能。
- 基础降级方案：用
@supports (filter: blur(1px))包裹过渡规则，不支持的环境自动回退到静态样式 - 别依赖
filter: url(#svg-filter)做兼容——SVG 滤镜在现代浏览器中性能差、调试难，且 iOS Safari 对外部 SVG 引用支持不稳定 - 如果业务必须兼容 IE，只能用 JS 检测 + class 切换 + Canvas 模拟滤镜（成本高，仅限关键场景）
- 注意：
filter: opacity()和filter: brightness()的兼容性比blur()高一档，可优先用于渐进增强
真正麻烦的不是怎么写 transition，而是当设计师要求“鼠标移入时图片先灰度再泛黄最后模糊”，你得拆解成三段独立 filter 变化，并为每段配好 timing 和 easing——中间任何一环顺序错、缺默认值、或用了不插值的函数组合，整个过渡就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
