关键帧动画使文字/边框发虚，源于浏览器将元素提升为独立合成图层，导致亚像素抗锯齿降级为灰度抗锯齿；触发条件包括transform、opacity、filter或will-change；safari和旧版chrome尤为明显。
为什么关键帧动画会让文字/边框突然发虚
核心原因是浏览器把动画元素提升为独立合成图层，导致文字从亚像素抗锯齿（subpixel AA）降级为灰度抗锯齿（grayscale AA）。只要你在 @keyframes 里用了 transform、opacity、filter 或带 will-change，就极可能触发这层切换——尤其在 Safari 和旧版 Chrome 中，模糊感非常明显。
典型现象：一个 <h2></h2> 标题加了 animation: slideIn 0.3s，动起来那一瞬间字就“糊一下”，动完又恢复锐利；或者卡片 hover 时边框边缘出现毛边。
- 不是所有动画都这样：纯
background-color或color过渡不会触发图层提升，也就不会模糊 -
transform: scale(1)或translateZ(0)这类“无意义变形”也会触发，别以为没变化就安全 - 模糊程度和设备强相关：macOS + WebKit 下最明显，Windows 上相对弱，但依然存在
如何让关键帧动画不模糊文字
关键是让文字始终留在主文档流图层，不被 GPU 单独拎走。这不是靠“修复模糊”，而是从源头避免图层分裂。
- 动画写在父容器上，而不是文字本身：比如给
.card加hover动画，让.card-title只响应 class 变化，自身不带transform或opacity - 如果必须动文字，加
-webkit-font-smoothing: antialiased+backface-visibility: hidden（仅对 WebKit 有效，但能缓解 Safari 的问题） - 避免在文字元素上直接用
filter: blur()或opacity动画；真要用，套一层isolation: isolate在父容器上，防止子元素被拖进模糊图层 - 慎用
will-change: transform：它会提前创建图层，哪怕动画还没开始——只在真正要动画的元素上设，且动画结束后手动移除（可用 JS 切 class）
filter: blur() 关键帧动画卡顿或失效怎么办
filter: blur() 默认走 CPU 合成，@keyframes 里直接写容易掉帧、跳变，甚至 Safari 完全不执行。这不是写法错，是渲染路径限制。
- 必须加
transform: translateZ(0)或will-change: filter强制 GPU 加速（注意：will-change: auto无效，得写明filter） - 模糊半径别超
blur(8px)：超过后性能断崖式下降，视觉差异却很小 - Safari 要加
-webkit-backface-visibility: hidden才认filter动画，否则只播首尾帧 - 别在同一个
filter值里混写多个函数，比如blur(2px) brightness(1.2)；Safari 往往只处理第一个，拆成两个独立动画更稳
响应式下动画模糊更严重？检查这几个点
响应式布局放大了图层分离的副作用，尤其是缩放、视口变化时，小数像素位移会让文字反复落在非整像素位置，加剧发虚。
- 垂直/水平滚动动画中，别用
translateY(-50%)这类百分比位移，改用固定像素值如translateY(-200px)，或配合calc()对齐整数 - 关键帧里优先用
%、vw、vh替代px，但模糊相关动画（如blur()）仍建议用px控制精度 - 确保父容器没设
overflow: hidden裁剪模糊溢出区域——blur()是向外扩散的，裁掉就等于白加 - 不要在媒体查询里重定义同名
@keyframes，会导致动画中断或图层状态错乱
真正难处理的不是“怎么加模糊”，而是“怎么让模糊只作用在该作用的地方”。一旦你开始调试 backface-visibility 和 isolation 的组合效果，说明你已经踩进图层合成的深水区了——这时候别硬调，先确认是不是非得动文字本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
