-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 这类属性。所以得用视觉模拟：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 ::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 误导，一试就卡住。