动画未生效是因为触发过早，元素尚未渲染完成或样式不可计算；应通过window.onload或DOMContentLoaded确保DOM就绪后，再添加动画类并设置opacity:0和animation-fill-mode:forwards。
动画在页面加载时没反应，是因为元素还没渲染完成
直接给元素写 animation 但没生效？大概率是 CSS 动画已声明，但触发时机早于 DOM 渲染——浏览器解析完 CSS 就开始尝试播放，而此时元素可能尚未挂载、或 display: none、或处于未可见区域。单纯依赖 @keyframes + 类名添加还不够，得确保「元素存在且样式可计算」后再启动。
用 window.onload 添加 class 是最稳妥的显式触发方式
window.onload 等待的是整个页面（含图片、脚本、样式表）完全加载完毕，此时 DOM 树和所有资源就绪，元素尺寸、位置、computed style 都可准确获取。适合需要精确控制「首帧动画起始点」的场景，比如 banner 淡入、导航栏滑出。
- 把动画定义写在 CSS 中，用一个类名（如
.animate-on-load）绑定animation属性 - 初始状态不加该类，避免预加载时意外播放
- 在
window.onload回调里，用document.querySelector找到目标元素，再用classList.add()加上动画类 - 如果多个元素要动，用
querySelectorAll配合forEach批量添加
示例：
// CSS
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-trigger {
animation: fadeIn 0.4s ease-out forwards;
}
// JS
window.onload = () => {
document.querySelectorAll('.js-fade-in').forEach(el => {
el.classList.add('fade-in-trigger');
});
};
注意 animation-fill-mode: forwards 和初始隐藏状态
如果不设 animation-fill-mode，动画播完会回退到原始样式（比如又变透明），看起来像“闪一下就没了”。加 forwards 才能保留最后一帧效果。同时，初始状态建议显式设为动画起点值（如 opacity: 0），而不是靠动画内部 from 自动推导——某些浏览器在元素未渲染前无法正确读取默认 opacity，导致动画从 1 开始突变。
立即学习“前端免费学习笔记（深入）”；
- 别只靠
@keyframes里的from，CSS 中也要写初始样式：.js-fade-in { opacity: 0; } - 必须加
animation-fill-mode: forwards，否则动画结束即复位 - 避免用
visibility: hidden或display: none做初始隐藏——它们会让元素脱离渲染流，opacity: 0更安全
DOMContentLoaded 比 onload 更快，但要小心资源依赖
如果动画不依赖图片、字体等外部资源（比如纯 UI 元素入场），用 DOMContentLoaded 可以更早触发，用户体验更顺滑。但它只等 DOM 解析完，不等 CSS/JS 加载完成，所以必须确保相关样式表已内联或提前加载，否则可能因样式未就绪而动画失效。
- 内联关键动画 CSS，或确保
<link rel="stylesheet">在<script>前 - 若动画涉及背景图、自定义字体，仍推荐用
window.onload - 现代写法可用
document.addEventListener('DOMContentLoaded', ...)替代onload赋值，避免覆盖
真正容易被忽略的是：动画元素的父容器如果有 overflow: hidden 且自身有位移，可能裁剪掉动画过程中的中间帧；还有 transform 触发硬件加速虽好，但过度使用会导致内存占用上升，尤其在低端设备上卡顿明显。
