淡入动画必须通过状态变化触发，不能仅设opacity:0就自动播放；核心在于“值变化”动作，如js加class、:target匹配或@keyframes自动执行，且animation必须含forwards以保持最终opacity:1状态。
淡入动画必须靠 class 切换触发，不能只设 opacity: 0
页面一加载就淡入，核心不是“怎么写动画”，而是“怎么启动它”。直接写 opacity: 0 + transition: opacity 0.4s 不会自动动——浏览器不会凭空开始过渡。必须有“值变化”这个动作：比如 JS 添加类、:target 匹配、或用 @keyframes 自动播放。
常见错误是把 transition 写在 .show 里：.show { opacity: 1; transition: opacity 0.4s; }。这样首次显示没过渡，因为初始状态没声明 transition。
正确写法是：
.fade-in {
opacity: 0;
transition: opacity 0.4s ease-out;
}
.fade-in.loaded {
opacity: 1;
}
JS 触发只需一行：document.querySelector('.fade-in').classList.add('loaded');
用 @keyframes 更可靠，但别漏掉 animation-fill-mode: forwards
如果想让元素加载完立刻开始淡入（不依赖 JS），@keyframes 是更稳的选择。它不依赖 DOM 操作时机，CSS 解析完就能播。
容易踩的坑是动画播完瞬间回退到 opacity: 0，文字闪一下就消失——这是因为没加 forwards。
必须写的参数包括：
-
animation-name（如fadeIn） -
animation-duration（如0.6s） -
animation-fill-mode: forwards（保留最终帧）
示例：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.text { animation: fadeIn 0.6s ease-out forwards; }
文字淡入时抖动？大概率是字体加载导致重排
渐显过程中文字突然跳动、行高突变，不是动画写错了，而是渲染上下文不稳定。典型原因是 Web Font 还没加载完，浏览器先用系统字体撑开容器，等自定义字体到位又重排一次。
解决方法不是调动画参数，而是控制字体行为：
- 给文字容器预设
min-height或固定line-height，防止尺寸浮动 - 自定义字体用
font-display: optional或swap，避免阻塞渲染 - 慎用
will-change: opacity：移动端可能引发额外合成层，反而卡顿
不要用 visibility: hidden 替代 opacity: 0 做初始隐藏——前者不占布局空间，会导致后续淡入时位置跳变。
多个元素依次淡入，优先用 CSS 的 animation-delay
想让标题、副标题、正文逐个淡入，别用 JS 写 setTimeout 链。既难维护，又容易因执行时机偏差导致节奏错乱。
CSS 原生支持 stagger 效果，靠 animation-delay 就能精准控制：
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.3s; }
.item:nth-child(3) { animation-delay: 0.5s; }
注意：延迟值要和动画总时长配合。如果动画本身 0.6s，延迟设成 2s 就会明显断档；设成 0.05s 又看不出顺序感。实际中 0.1–0.3s 是较自然的区间。
真正容易被忽略的是：所有元素共用同一套 @keyframes 定义，但每个实例的 delay、duration、easing 都可独立设——这才是 CSS 动画的弹性所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
