text-shadow动画常失效是因为必须显式声明x、y、blur、color四个值，缺一则退化为离散切换；需统一单位、全用rgba、保持层数一致，且Safari旧版仅支持@keyframes。
text-shadow 动画为什么常失效？
直接对 text-shadow 使用 @keyframes 动画，多数情况下没反应——不是写法错，而是浏览器限制：text-shadow 的颜色、偏移、模糊半径虽都支持动画，但**必须显式声明所有四个值（x, y, blur, color）**，漏一个就会退化为「离散切换」，看起来像闪烁而非过渡。
- 错误写法：
text-shadow: 2px 2px 4px #000;→ 动画时浏览器无法推断起始/结束状态的完整参数 - 正确写法：始终补全为
text-shadow: 2px 2px 4px #000000;（含透明度的 rgba 更稳妥） - Chrome/Firefox 支持平滑过渡，Safari 15.4+ 才稳定支持
text-shadow的 transition，旧版 Safari 只能靠@keyframes
用 transition 实现鼠标悬停阴影渐变
适合按钮、标题等需要轻量交互的场景。关键是把初始和悬停状态的 text-shadow 写成结构一致的完整值，且避免使用 inherit 或 initial 这类非数值关键字。
h2 {
text-shadow: 0 0 0 #000000;
transition: text-shadow 0.3s ease;
}
h2:hover {
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
- 初始状态用
0 0 0模拟「无阴影」，比none更易过渡 - 务必统一用
rgba()，避免从#000切到red导致颜色通道插值异常 - 不要设
transition: all，只监听text-shadow，否则字体大小或颜色变化会意外触发阴影重绘
@keyframes 中如何让阴影「呼吸」或「漂移」
复杂动态效果（如文字微震、阴影扩散）必须用帧动画。关键点在于：每帧的 text-shadow 值必须可线性插值，即 x/y/blur/color 全部为数值，且单位一致（全用 px 或全用 em）。
@keyframes shadow-pulse {
0% {
text-shadow: 0 0 4px rgba(0, 100, 255, 0.7);
}
50% {
text-shadow: 0 0 12px rgba(0, 150, 255, 0.4);
}
100% {
text-shadow: 0 0 4px rgba(0, 100, 255, 0.7);
}
}
.title {
animation: shadow-pulse 2s infinite ease-in-out;
}
- 避免混用单位：比如
2px 2px 4px和0.1em 0.1em 0.2em同时出现会导致动画卡顿 - 多层阴影需保持层数一致：起始帧 2 层，结束帧也得是 2 层，否则浏览器丢弃部分阴影
- 性能敏感场景慎用高模糊值（
blur > 20px），尤其在移动端可能触发强制重绘
兼容性兜底与性能陷阱
IE 完全不支持 text-shadow 动画；iOS Safari 14 及更早版本对 transition 支持极差，只能依赖 @keyframes。另外，阴影动画实际消耗 GPU 资源，别在长段落或滚动区域滥用。
立即学习“前端免费学习笔记（深入）”；
- 兼容写法：先写无动画基础样式，再用
@supports (animation: name)包裹动画规则 - 避免在
body或div上批量加动画，CSS 选择器应精确到具体 class（如.hero-title） - 调试时打开 Chrome DevTools → Rendering → 「Paint flashing」，看阴影变化是否引发大面积重绘
真正难的不是写出来，是控制好模糊半径和透明度的组合节奏——稍快则浮躁，稍慢则迟滞，而浏览器对这两者的插值算法又各不相同。
