页面淡入动画需明确触发机制：CSS动画靠@keyframes自动播放（需forwards），transition则依赖JS等时机添加类实现0→1变化；Safari需will-change和backface-visibility优化。
页面初次加载时的淡入动画，本质不是“等页面加载完再动”，而是让浏览器在解析 HTML 的第一刻就启动过渡——关键在于初始样式必须内联、状态变化必须可触发。
为什么直接写 opacity: 0 + transition 不会自动淡入
浏览器不会因为元素存在就“自动播放”过渡。transition 只响应属性值的**变化过程**，不是声明了初始态就会动。如果 DOM 加载后元素始终是 opacity: 0，那它就一直透明，根本没“变”过。
- 常见错误：只在 CSS 里写
.fade { opacity: 0; transition: opacity 0.4s; }，没设任何触发动作 - 正确逻辑：必须有“从 0 → 1”的值变更，这个动作可以由 JS 添加类、CSS
:target匹配，或@keyframes自动执行 - JS 触发最可控：元素挂载后立即加
loaded类，且该类需明确定义opacity: 1
用 @keyframes 实现零 JS 淡入（推荐给静态页）
适合不需要交互控制、追求首屏即动的场景，比如个人主页、宣传页。它不依赖 JS 执行时机，CSS 解析完成就播，稳定性高。
- 必须写
animation-fill-mode: forwards，否则动画播完瞬间回退到opacity: 0，文字闪一下就消失 - 避免用
display: none或visibility: hidden包裹动画元素，它们会让元素脱离渲染流，@keyframes无法作用于不可见节点 - 示例写法：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.hero-text {
animation: fadeIn 0.6s ease-out forwards;
}
用 transition + JS 控制（推荐给需要条件触发的页面）
当淡入要配合资源加载完成（如 Web Font、图片、数据请求），就必须用 JS 控制类名添加时机。此时重点不是“怎么写动画”，而是“什么时候加类”。
- 不要在
DOMContentLoaded立即加类——字体还没加载完，文字可能先用系统字体撑开，动画中突然重排抖动 - 更稳妥的做法是监听
fontfaceobserver或用document.fonts.load()确认字体就绪后再加active类 - CSS 必须显式声明初始态：
.fade-in { opacity: 0; transition: opacity 0.4s ease; }，不能只写在.fade-in.active里 - JS 只需一行：
element.classList.add('active');，无需手动设opacity: 1
iOS / Safari 下淡入卡顿或首帧延迟的硬解法
旧版 Safari（尤其 iOS ≤16）对合成层管理较弱，单纯加 transition 容易掉帧。必须主动提示浏览器：“这个元素马上要动”。
- 动画开始前 1–2 帧动态加
will-change: opacity, transform，动画结束立刻移除——它不是性能开关，而是合成层预分配提示 - 加
backface-visibility: hidden强制开启 GPU 图层，避免因隐式层合并导致掉帧 - 避开在动画元素上用
filter、大图background-image或box-shadow，这些会破坏图层隔离 - 别用
height或width做淡入基础，它们触发布局重排；优先用opacity+transform
真正难的不是写出能动的代码，而是判断淡入该由谁触发：是 CSS 自动播，还是 JS 等字体/资源就绪后再推一把；以及在低端 Safari 上，will-change 加早了会降性能，加晚了动画已卡住——时机差一帧，体验就断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
