text-shadow + animation 可模拟逐字滑入效果：文字设为透明，用带偏移的 text-shadow 配合 steps() 动画实现“高亮扫过”，需 nowrap、hidden、精准字符数 steps 值及适配移动端与旧浏览器。
text-shadow + animation 实现打字滑动过渡效果
纯 CSS 没法直接“逐字染色”，但可以用 text-shadow 模拟颜色从左向右“滑入”的视觉错觉。核心是让文字本身透明（color: transparent），再用一层带偏移的 text-shadow 做“高亮扫过”效果，配合 @keyframes 动画控制阴影宽度和位置。
- 必须设置
white-space: nowrap和overflow: hidden，否则动画会因换行或溢出失效 -
text-shadow的模糊值（第三参数）不宜过大，否则边缘发虚、滑动感变弱；推荐 0–2px - 动画时长建议 ≥ 1.5s，太快人眼跟不上“滑动”节奏，容易只看到闪烁
为什么不能用 color 动画直接渐变每个字符
CSS 的 color 属性不支持对单个字符做独立动画，除非把每个字包进 <span> —— 这破坏语义、增加 DOM 负担，且响应式重排时极易错位。而 text-shadow 方案只需一个元素，动画由浏览器合成层处理，性能更稳。
- 若强行用 JS 拆字加
span再 animatecolor，在 Safari 上常出现渲染卡顿或首帧跳变 - 部分安卓 WebView 对多层
text-shadow动画支持不佳，需降级为单层硬边阴影（blur: 0）
兼容性与 fallback 处理要点
IE 完全不支持 text-shadow 动画，Edge 17+ 才稳定。如果必须兼容旧浏览器，得用 JS 检测并回退到静态文字或淡入效果。
- 检测方式：用
CSS.supports('text-shadow', '0 0 1px red')判断基础支持 - 动画关键帧里避免使用
inset或负模糊值，这些在 Firefox 旧版中可能被忽略 - 移动端要注意：iOS Safari 对
text-shadow动画的 GPU 加速不充分，建议加transform: translateZ(0)强制触发
一个可直接粘贴的最小可用示例
.typing-slide {
color: transparent;
white-space: nowrap;
overflow: hidden;
animation: slideIn 2.4s steps(12, end);
}
@keyframes slideIn {
0% { text-shadow: -10em 0 0 #000; }
100% { text-shadow: 0 0 0 #000; }
}
其中 steps(12, end) 的 12 需按实际字符数调整（比如 8 字就写 steps(8, end)），否则滑动会卡顿或跳步。这个数字不是近似值，差 1 都可能让最后一字“闪一下”才出现。
立即学习“前端免费学习笔记（深入）”；
真正难调的是动画节奏和阴影偏移量的匹配——偏移太大，开头空太多；太小，结尾收不干净。得在真机上反复试两三次才能稳住。
