起始透明度必须是0，结束必须是1，中间可加缓冲帧（如10%处保持opacity: 0）避免突兀跳变；禁用from/to混用百分比，以防旧版Safari解析异常。
直接用 @keyframes + animation 就能实现，不需要 JS，但必须注意浏览器兼容性和触发时机——淡入不是“一刷新就自动播”，得靠 class 控制或 JS 注入。
定义淡入关键帧时 opacity 起止值怎么设？
起始透明度必须是 0，结束必须是 1，中间可加缓冲帧避免“突兀跳变”。比如：
@keyframes fade-in {
0% { opacity: 0; }
10% { opacity: 0; } /* 停留一小段，视觉更自然 */
100% { opacity: 1; }
}- 别写
from/to混用百分比，部分旧版 Safari 对from解析不稳定 - 如果元素初始有
display: none，opacity: 0不生效——得先设成display: block或visibility: hidden - 动画中不要同时改
height或margin，否则会触发重排，卡顿明显
给元素绑定动画时 animation-duration 和 delay 怎么配？
animation-duration 决定淡入快慢，animation-delay 控制何时开始。常见组合：
- 首屏内容：延迟
0s，时长0.6s～1.2s（太快像闪，太慢拖节奏） - 非首屏模块（如侧栏、footer）：用
animation-delay: 0.3s错开主内容，避免所有元素同时动 - 想让动画“一进来就播”，别依赖页面加载完成事件——CSS 动画在 class 加入瞬间触发，所以 JS 注入 class 比等
DOMContentLoaded更准
为什么加了动画却没效果？常见失效原因
多数问题出在 CSS 层叠或渲染上下文上：
立即学习“前端免费学习笔记（深入）”；
-
opacity被父级overflow: hidden截断——检查祖先元素是否裁剪了渲染区域 - 动画名拼错：
animation-name: fadein和@keyframes fade-in不匹配（连字符差异） - 没加 Webkit 前缀：iOS Safari 13.4 之前仍需
-webkit-animation，尤其用transform复合动画时 - 元素本身有
transition: opacity，和animation冲突——删掉 transition，动画由 keyframes 全权控制
真正难的不是写出来，而是让淡入时机和交互节奏一致：比如用户点击 tab 后，新内容要等前一个动画结束再播，否则视觉打架。这时候就得用 animationend 事件或 CSS animation-play-state 配合控制，不是光靠一套 keyframes 就能搞定的。
