text-shadow 支持 transition，但需用 0 0 0 transparent 替代 none 作为起点，确保起始与结束状态均为具体值，从而实现平滑过渡。
在CSS中，transition 和 text-shadow 结合使用可以实现文字阴影的平滑过渡效果，比如鼠标悬停时阴影逐渐出现或变大。但需要注意一些细节，否则动画可能无法生效。
text-shadow 支持 transition 吗？
虽然 text-shadow 不是默认可动画的CSS属性，但现代浏览器支持通过 transition 对其进行过渡处理，前提是起始和结束状态都为具体的 text-shadow 值（不能从 none 直接到有值，建议用 0 0 0 transparent 作为起点）。
错误写法示例：
.text {
text-shadow: none;
transition: text-shadow 0.3s ease;
}
.text:hover {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
这种写法在某些浏览器中可能导致没有过渡效果，因为 none 和具体值之间无法插值。
立即学习“前端免费学习笔记（深入）”；
正确实现文字阴影过渡
要让 text-shadow 平滑变化，应始终使用具体数值定义阴影，包括初始状态。
推荐写法：
.text {
text-shadow: 0 0 0 transparent; /* 起始：无可见阴影 */
transition: text-shadow 0.3s ease;
cursor: pointer;
}
.text:hover {
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); / 悬停时显示阴影 /
}
- 使用
0 0 0 transparent代替none，确保可过渡 - 调整模糊半径（如从0到8px）可增强动画感
- 颜色建议使用
rgba控制透明度，过渡更自然
多个阴影的过渡技巧
如果需要多层阴影同时变化，也要保证数量一致。
.text {
text-shadow:
0 0 0 transparent,
0 0 0 transparent;
transition: text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.text:hover {
text-shadow:
1px 1px 2px rgba(0,0,0,0.3),
-1px -1px 2px rgba(255,255,255,0.5);
}
- 初始状态用相同数量的“透明阴影”占位
- 过渡函数可用
cubic-bezier让动画更细腻
性能与兼容性提示
虽然大多数现代浏览器支持 text-shadow 过渡，但仍需注意：
- 避免在大量文本上频繁使用复杂阴影，影响渲染性能
- 老版本 Safari 可能对
text-shadow动画支持不完整，建议测试 - 可搭配
will-change: text-shadow提前优化动画性能（慎用）
基本上就这些。只要初始化用具体值而非 none，text-shadow 配合 transition 就能顺畅动起来。不复杂但容易忽略。
