结论：用 letter-spacing 控制聚拢/散开，配合 opacity 避免初始堆叠时文字糊成一块黑影，是最轻量、兼容性最好、且不依赖 js 的方案。
直接说结论：用 letter-spacing 控制聚拢/散开，配合 opacity 避免初始堆叠时文字糊成一块黑影，是最轻量、兼容性最好、且不依赖 JS 的方案。
为什么不能只靠 letter-spacing 从负值到正值过渡
纯靠 letter-spacing: -40px → 5px 动画，开头几帧文字会完全重叠成一个高对比度色块（尤其在深色背景上），肉眼无法分辨是“文字在聚拢”还是“页面出 bug 了”。这不是动画效果，是视觉干扰。
常见错误现象：letter-spacing: -50px 下文字叠在一起，但没做透明度控制，导致动画开始瞬间页面闪出一个突兀的黑块；或动画结束时文字边缘发虚、有残影。
- 根本原因是：浏览器渲染时，重叠文字的像素叠加 + 抗锯齿处理，会让字体边缘产生灰阶过渡，和
filter: blur()类似，但不可控 -
opacity: 0 → 1必须和letter-spacing同步启动，且起始 opacity 要略晚于 spacing 变化（比如 delay 0.2s），否则用户看到的是“先糊成一团再淡入” - 不要用
visibility: hidden替代opacity—— 它不触发重绘，动画中间状态会跳帧
letter-spacing 的取值怎么选才不翻车
负值不是越小越好。设成 -100px 在 16px 字体下可能让文字向左溢出容器，甚至被裁剪；设成 -5px 又看不出聚拢感。得结合字体大小、字数、容器宽度动态估算。
- 经验公式：
letter-spacing初始值 ≈-0.8 × font-size × 字符数（仅作起点，需微调） - 例如
font-size: 80px、5 个汉字 → 初始建议letter-spacing: -320px，再根据实际效果缩到-260px左右 - 英文单词要注意空格：如果文本含空格，
letter-spacing也会影响空格宽度，容易导致布局偏移；可考虑用white-space: nowrap锁定 - 移动端要加
transform: translateZ(0)强制 GPU 加速，否则 iOS Safari 下letter-spacing动画卡顿明显
opacity 过渡的时机和缓动必须手动配
很多人直接写 opacity: 0; animation: spread 2s;，结果动画前半段文字看不见，后半段突然全亮——这不是“渐显”，是“弹出”。关键在分阶段控制。
- 推荐用
@keyframes显式定义 opacity 节点，例如：@keyframes spread { 0% { letter-spacing: -240px; opacity: 0; } 30% { letter-spacing: -240px; opacity: 0.01; } 60% { letter-spacing: -60px; opacity: 0.8; } 100% { letter-spacing: 8px; opacity: 1; } } - 避免用
ease-in-out全局缓动——spacing 和 opacity 对人眼的感知节奏不同，必须分开调 - 如果父容器有
filter: contrast()（用于强化交融感），opacity会受其影响变暗，此时要把 opacity 起始值设得更高一点（如 0.05），否则第一帧几乎不可见
最易被忽略的一点：动画结束后，letter-spacing 的最终值如果和正常排版差异太大（比如留了 12px 空隙），会导致后续文本流错位或换行异常。务必检查动画 forwards 填充后的静态样式是否符合设计预期——别让动效牺牲了可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
