逐行淡入每段p需用animation-delay动态错开：纯css用--index自定义属性配合calc，js注入更灵活；起始设opacity:0+visibility:hidden，动画中显隐切换防跳动；时长0.4s配延迟0.45s避免重叠或断档。
用 animation + @keyframes 控制每行 p 逐行淡入
直接给每个 p 加独立动画，靠 animation-delay 错开触发时间。不能靠伪元素或 line-height 拆行——那是单个元素内的多行，而你明确要“每个 p 标签”作为一行单位。
关键点：延迟必须基于 DOM 中 p 的顺序动态计算，不能手写死值。否则增删 p 就得同步改 CSS。
- 用 CSS 自定义属性（
--index）配合:nth-of-type()或 JS 注入更稳妥 - 纯 CSS 方案：给每个
p手动加style="--index: 1;"、style="--index: 2;"…再在 CSS 里写animation-delay: calc(var(--index) * 0.3s); - JS 注入更省事：
document.querySelectorAll('p').forEach((p, i) => { p.style.animationDelay = `${i * 0.3}s`; });
opacity 动画必须搭配 visibility 防布局跳动
只设 opacity: 0 → 1 动画，元素仍占位，但初始透明，用户可能误点或影响可访问性（屏幕阅读器仍读取）。更干净的做法是让元素真正“未渲染”直到动画开始。
- 起始状态设
opacity: 0; visibility: hidden; - 动画中间帧（比如
50%）设visibility: visible;，确保过渡中可交互 - 终态保持
opacity: 1; visibility: visible; - 别用
display: none——它无法参与 CSS 动画，会直接消失/出现，没有过渡
动画时长和延迟不匹配会导致“堆叠”或“空档”
如果每行动画持续 0.6s，但延迟只隔 0.3s，第二行会在第一行还没结束时就开始淡入，视觉上就不是“一行接一行”，而是重叠入场；反之延迟太长（比如 1s），中间就会有明显空白停顿。
- 推荐组合：
animation-duration: 0.4s;+animation-delay: calc(var(--index) * 0.45s); - 0.45s 延迟略大于动画时长，留出呼吸感，又不显断档
- 移动端要注意：过快（0.6s）显得拖沓，尤其内容多时
- 避免用
ease-in-out——首尾减速会让“出现”变模糊；用linear或ease-out更干脆
IE 和旧 Safari 不支持 calc() 在 animation-delay 里
Chrome/Firefox/Edge 新版没问题，但 iOS calc(var(--index) * 0.4s) 这种写法，会直接忽略整条声明，所有 p 同时出现。
- 兼容方案一：用 JS 遍历设置内联
style（上面示例已可用） - 兼容方案二：预设最多 10 行的 CSS 规则：
p:nth-of-type(1) { animation-delay: 0s; } p:nth-of-type(2) { animation-delay: 0.45s; } p:nth-of-type(3) { animation-delay: 0.9s; } /* ... up to 10 */ - 别依赖
transition替代——transition需要状态变化触发（比如 hover、class 切换），不适合页面加载即自动播放
最易被忽略的是：动画触发时机。CSS 动画默认在元素插入 DOM 时立即开始，但如果 p 是 JS 动态生成的，且没等样式加载完就 append，动画可能漏掉前几行。保险做法是等 DOMContentLoaded 或用 requestAnimationFrame 包一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
