text-stroke 不支持 css 过渡，因其不在可动画属性白名单中；可用 text-shadow 模拟（推荐双层模糊法）或 svg 的 stroke/stroke-width 实现平滑动画，需注意 safari 中 backdrop-filter 冲突问题。
text-stroke 在 CSS 动画里不支持过渡
直接给 text-stroke 加 transition 不会动，浏览器根本不认——它不是可动画的 CSS 属性。你看到文字描边“卡顿跳变”，不是代码写错了，是标准就不支持。
- 只有部分 CSS 属性能参与
transition或@keyframes，text-stroke（包括text-stroke-width和text-stroke-color）全都不在白名单里 - Chrome、Firefox、Safari 都一样，不是兼容性问题，是规范限制
- 想“过渡描边”，得绕路：用
text-shadow模拟描边，或靠 SVG +stroke+transform
用 text-shadow 模拟可过渡描边
text-shadow 支持逐像素过渡，且兼容性好（IE10+），是实际项目中最稳的替代方案。
- 单层
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, ...写 8 个方向能逼近实心描边，但性能差、维护难 - 推荐双层模糊法：
text-shadow: 0 0 2px #000, 0 0 4px #000—— 控制blur-radius就能平滑缩放“描边感” - 过渡时只改
blur-radius值，比如从0→3px，视觉上就是描边“浮现” - 注意：过大的
blur-radius会让文字发虚，移动端尤其明显，建议上限控制在4px内
SVG + stroke 实现真正描边动画
如果必须用矢量描边（比如等宽字体对齐、高缩放不失真），就得切到 SVG；<text></text> 元素的 stroke 和 stroke-width 是可过渡属性。
- 必须显式设置
fill: none，否则文字底色会盖住描边 - 加
paint-order: stroke fill可确保描边在文字上方（部分旧版 Safari 需要） - 动画参数建议用
stroke-dasharray+stroke-dashoffset做描边绘制效果，比直接过渡stroke-width更可控 - 注意：SVG
<text></text>不继承父级 CSS 字体设置，font-family、font-size得单独写在 SVG 标签里
别忽略字体渲染和 backdrop-filter 的冲突
加了描边动画的文字，一旦后面叠了 backdrop-filter: blur()（比如毛玻璃背景），在 Safari 上大概率出现描边闪烁或消失。
立即学习“前端免费学习笔记（深入）”；
- 这不是动画 bug，是 WebKit 渲染管线对混合图层的处理缺陷
- 临时解法：给文字容器加
transform: translateZ(0)或will-change: transform强制硬件加速 - 更稳妥的做法：把描边逻辑移出模糊区域，比如用伪元素
::before绘制描边层，主文字层保持透明无描边 - 这个坑在设计稿里看不出来，只有真机跑起来才暴露，上线前务必在 iOS Safari 实测
