必须用 opacity 实现文字渐隐渐现动画，配合 transition 或 animation 且初始 opacity: 0；逐字动画需拆分为同级 span 元素，用 nth-child(n) 配合 animation-delay 控制延迟，单位统一为 s，兼容性要求下限用 0.1s 一位小数并加 -webkit 前缀。
用 @keyframes 控制 opacity 动画，别碰 visibility
文字渐隐渐现靠的是 opacity 从 0 到 1 的过渡，不是显示/隐藏切换。visibility: hidden 或 display: none 会中断动画流程，导致“闪一下就出来”，根本看不到渐变过程。必须用 opacity 配合 transition 或 animation，且初始状态得是 opacity: 0，不能靠 JS 插入后才设——否则 nth-child 的延迟会失效。
nth-child(n) 加 animation-delay 的实际写法
每个字（或每行）需要独立触发动画，就得让它们是同级元素，比如把文字拆成 <span>；nth-child(1) 延迟 0.1s，nth-child(2) 延迟 0.2s……这样逐个进场。注意：延迟值不能全写死，要用预处理器变量或 CSS 自定义属性批量控制，否则 20 个字就得写 20 行规则。
- 必须确保父容器用
display: inline-block或display: flex，否则nth-child对换行后的文本节点无效 -
animation-delay单位统一用s，别混用ms，容易算错节奏 - 如果文字是动态插入的，得等 DOM 渲染完再加类名，否则 CSS 动画不触发
IE 和旧版 Safari 下 animation-delay 的兼容性坑
IE10+ 支持 animation-delay，但不支持小数秒写法（如 0.15s），会直接忽略整条规则；Safari 12 之前对 nth-child + 多层嵌套的动画延迟计算有偏移。稳妥做法是：延迟值只用 0.1s、0.2s 这种一位小数，避免 0.15s；同时给所有动画加 -webkit-animation-delay 前缀。
- 不要依赖
calc()算延迟，比如animation-delay: calc(0.1s * var(--i))，CSS 变量在animation-delay中不生效 - 移动端 iOS Safari 对连续多个
nth-child动画可能掉帧，建议限制在 10 个以内，或改用 JS 控制setTimeout
性能敏感点：重排重绘和 will-change
opacity 动画本身是合成层操作，一般不触发布局，但若文字父容器有 transform 或 filter，叠加 animation-delay 可能引发图层分裂，导致内存占用飙升。尤其在长列表中逐字动画时，浏览器要为每个 span 创建独立合成层。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: opacity能提前提示，但别滥用——只加在真正要动的元素上，否则反而拖慢首次渲染 - 避免对
font-size或line-height做动画，那必然触发重排，渐隐效果就卡顿了 - 真要大量文字逐字动，不如用
clip-path配合stroke-dashoffset（适合单行英文），更省资源
动画节奏感其实藏在延迟差值里，0.05s 和 0.1s 的差别肉眼明显，但很多人调着调着就忘了测真实设备上的帧率。
