最简方案是直接设animation并delay为0s，但需确保CSS在head中加载、避免display:none、定义完整keyframes；更可靠的是DOMContentLoaded时添加动画类，动态元素需在挂载后执行，禁用初始animation-play-state:paused。
页面加载完成立即触发动画的 CSS 方案
直接给元素加 animation 并设置 animation-delay: 0s 是最简方式，但要注意：动画不会等 DOM 渲染完成才开始——如果样式表未就绪或元素尚未挂载，动画可能被跳过或只播一半。
- 确保 CSS 在
中加载，且不被media或@import延迟 - 避免对
display: none元素设动画；改用visibility: hidden+opacity: 0更稳妥 - 动画需定义明确的
from和to（或@keyframes），否则浏览器可能无法触发重绘
用 DOMContentLoaded 手动添加动画类更可靠
当动画依赖 JS 控制时机（比如等某个模块初始化完），在 DOMContentLoaded 里加 class 是主流做法。它比 window.onload 更早，且避开图片/资源阻塞。
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-on-load').forEach(el => {
el.classList.add('animate-in');
});
});
-
.animate-in对应的 CSS 必须含animation属性，不能只靠transition - 若元素是动态插入的（如 Vue/React 组件挂载后），需在组件
mounted或useEffect中调用类似逻辑 - 重复触发？加个
data-animated="true"标记，检查后再执行
避免 animation-play-state: paused 导致的“不动”问题
有人想先暂停动画、再 JS 播放，结果发现加了 animation-play-state: paused 后，即使后续设为 running 也不动——这是因为初始状态没被浏览器识别为“可播放”。
- 不要在初始样式中写
animation-play-state: paused - 正确做法：初始无
animation，JS 添加 class 后再设animation-play-state: running - 或用
animation: none临时清空，再用animation: name 0.3s ease覆盖
兼容性与性能注意点
旧版 Safari（animation-fill-mode: both 的处理有偏差，可能导致首帧闪烁；同时，大量元素同时动画会触发强制同步布局（layout thrashing）。
立即学习“前端免费学习笔记（深入）”；
- 关键动画建议加
will-change: transform（但别滥用，尤其对非 transform 属性） - 移动端慎用
animation-timing-function: cubic-bezier(...)高频曲线，部分 Android WebView 渲染卡顿 - 如需精确控制多个动画时序，优先用
setTimeout或requestAnimationFrame而非依赖animation-delay
真正难的不是“怎么播”，而是“播得准”——DOM 就绪、样式计算、重排重绘、GPU 上传，每个环节都可能吃掉几毫秒。别假设浏览器会按你写的顺序执行。
