CSS如何实现文字书写动画效果_通过stroke-dasharray实现

文字默认无描边，需设stroke和stroke-width并fill:transparent才能触发stroke-dasharray动画；CSS无法动态获取真实长度，须用SVG text+JS getTotalLength()或预设安全值（≥预估长1.2倍）；-webkit-text-stroke不生成路径，不支持该动画。

stroke-dasharray 动画为什么文字一动就消失？

因为 stroke-dasharray 本身只作用于描边，而普通文字默认没有描边（stroke 为 none），直接加动画只会让“不存在的线”在算长度、设虚线——结果就是啥也不显示。必须先让文字有可动画的描边路径。

• 给文字加 stroke（哪怕只是 #000）且设置 stroke-width（如 1px）
• 同时设 fill: transparent，否则填充色会盖住描边动画
• 用 textLength 或 JS 获取真实路径长度更稳，CSS 的 getTotalLength() 在某些字体/字号下返回 0

怎么用 CSS 算出文字路径总长并启动描边动画？

CSS 本身不能动态读取文字长度，所谓“自动计算”其实是假象——你得靠 SVG <text> + JS 调用 getTotalLength()，或提前估算。纯 CSS 方案只能固定值，容易错位。

• 最稳妥：把文字包进 <svg>，用 <text> 标签，再用 JS 读 textElement.getTotalLength()
• 如果坚持纯 CSS，可用 stroke-dasharray: 200; stroke-dashoffset: 200; 这类预设值，但换字体/字号就得重调
• stroke-dasharray 值过小会导致动画卡顿或跳帧，建议至少设为预估长度的 1.2 倍

SVG text 和 HTML text + -webkit-text-stroke 有啥区别？

前者能真正走 stroke-dasharray 动画路径；后者只是视觉模拟描边，不生成 SVG 路径，stroke-dasharray 完全无效。

• -webkit-text-stroke 是 CSS 文本修饰，和 SVG 描边无关，加了 stroke-dasharray 也没反应
• 想用原生 HTML 文字做书写动画，必须用 SVG 包裹，或改用 clip-path + transform 模拟（但不是真描边动画）
• SVG <text> 支持 dominant-baseline、text-anchor 等对齐控制，排版更可控

动画卡顿或从中间开始写？检查这三点

描边动画看起来“断”或“偏”，大概率是长度、起点、时机没对齐。

立即学习“前端免费学习笔记（深入）”；

• 确保 stroke-dashoffset 初始值 = stroke-dasharray 值（例如都设 200），否则起点错位
• 动画时长别太短（0.3s 以下易丢帧），配合 ease-out 比 linear 更自然
• 文字含空格或连字符时，部分浏览器会把它们算进路径但不渲染，导致长度误判；用 white-space: nowrap + letter-spacing: 0 减少干扰

文字路径长度不是“写死就行”的参数，它依赖字体加载状态、渲染时机、甚至系统字体回退——上线前务必在真实设备上测不同字号和中英文混排场景。