-webkit-text-stroke无法动画是浏览器规范限制，因其width和color被列为不可动画属性；需用伪元素+mask或transform等视觉模拟实现描边动态效果。

-webkit-text-stroke 能加描边，但不能直接动画——这是硬限制，不是写法问题。

为什么 -webkit-text-stroke 加了 transition 没反应

浏览器规范明确把 text-stroke-width 和 text-stroke-color 列为「不可动画属性」。哪怕你写 transition: -webkit-text-stroke 0.3s，Chrome/Safari 也完全忽略。这不是兼容性问题，是 CSS 动画引擎压根不支持它。

想让描边“出现”或“生长”，得绕开 text-stroke

真正能动画的只有 color、opacity、transform 这类属性。所以得用视觉模拟：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 ::before 伪元素复制文字，设 -webkit-text-stroke: 2px #00eeff + color: transparent
• 给伪元素加 mask：一个从左到右的线性渐变（mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50%)）
• 动画 mask-position: 0% 0% → 100% 0%，或者更稳地用 transform: translateX(-100%) 移动遮罩层
• 注意 mask-type: luminance 必须显式声明，否则 Safari 可能不认

-webkit-text-stroke 的实际使用边界

它适合静态高亮、科技感标题、深色背景下的文字强化，但不适合动态效果。常见误用：

• 和 text-shadow 混用导致描边糊成一团（text-shadow: 0 0 2px #000 + -webkit-text-stroke: 1px #00eeff 在小字号下尤其明显）
• 在 writing-mode: vertical-rl 下描边位置错乱，因为 stroke 渲染逻辑受书写方向影响
• 没配 color：只设 stroke 不设 color，文字可能彻底不可见（尤其在旧版 Safari 中）

真正要动的描边，从来不是靠 stroke 自身变化，而是靠遮罩推、透明度叠、或 transform 挤——这点容易被 demo 误导，一试就卡住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！