text-stroke不可动画，需用mask或clip-path模拟描边生长；推荐css mask+transform方案，注意safari兼容性及writing-mode影响。
text-stroke 本身不支持动画，直接 transition 无效
很多同学一上来就给 text-stroke 加 transition: text-stroke 0.3s，结果发现完全没反应——这不是你写错了，是 CSS 规范里明确把 text-stroke（包括 text-stroke-width、text-stroke-color）列为「不可动画属性」。浏览器压根不认这个过渡。
真正能动的，只有 color、opacity、transform 这类被广泛支持的属性。所以想“描边生长”，得绕开 text-stroke 的限制，用别的视觉手段模拟。
用遮罩层 + transform 模拟描边展开效果
核心思路：把文字本身设为实心色，再叠一层带描边的同文字内容作为“描边层”，用 clip-path 或 mask 遮住它，再通过 transform: scaleX() 或 width 动画让遮罩逐步露出描边部分。
更稳定的做法是用 mask（配合 SVG mask），但兼容性要求高；如果只要 Chrome / Safari / Edge 新版本，推荐下面这个纯 CSS 方案：
立即学习“前端免费学习笔记（深入）”；
- 用
::before伪元素复制文字，设置text-stroke和透明填充 - 给伪元素加
mask：一个从左到右线性渐变的 SVG mask（mask-type: luminance） - 动画 mask 的
mask-position或直接用transform: translateX()移动遮罩层 - 注意：Firefox 对 CSS
mask支持不稳定，若需兼容，改用clip-path: inset(0 100% 0 0)+transition: clip-path
clip-path 动画在 Safari 上容易卡顿或失效
Safari 对 clip-path 的硬件加速不完善，尤其用百分比或复杂函数时，动画可能掉帧、跳变，甚至整个伪元素消失。这不是代码写错，是渲染管线的老问题。
实操建议：
- 避免用
clip-path: polygon()做动态描边，改用inset()或ellipse()这类简单函数 - 强制开启 GPU 加速：
will-change: clip-path或transform: translateZ(0) - 测试时务必在真机 Safari 上验证，模拟器表现常过于乐观
- 如果文字是单行且宽度固定，用
overflow: hidden+width动画替代clip-path，反而更稳
描边“生长”方向与文字排版强耦合
所谓“从左往右生长”，实际依赖文字流方向（direction）、书写模式（writing-mode）和伪元素的盒模型行为。比如 writing-mode: vertical-rl 下，translateX() 就会变成上下动。
关键判断点：
- 先确认容器的
direction是ltr还是rtl，影响mask-position起始值 - 如果用了
transform: scaleX()模拟展开，记得加transform-origin: left center，否则会缩放中心偏移 - 中英文混排时，字体度量差异可能导致描边层和底文错位，建议统一用
font-feature-settings: "liga" 0关闭连字，减少浮动误差
最麻烦的不是写不出来，而是同一段代码在 Chrome 看着完美，在 Safari 里描边突然断半截，或者换了个字体就对不上位置——这些细节没跑通前，别急着封装成组件。
