页面加载时入场动画应在元素渲染完成的第一帧启动，最可靠方式是domcontentloaded事件中动态添加动画类，避免display:none、css延迟加载、js动态插入导致的动画失效，并优先使用transform和opacity等不触发重排的属性。
页面加载时自动触发的入场动画，核心不是“等 DOM 加载完再播”，而是让动画在元素渲染完成的**第一帧就启动**。靠 animation-delay: 0s 不够稳，真正可靠的是用 DOMContentLoaded 动态加类，或确保 CSS 提前就绪、元素不被 display: none 拦截。
为什么直接写 animation 有时不播放？
90% 的情况是动画绑定了，但元素没“活过来”：
-
display: none的元素永远不会触发动画；改用visibility: hidden; opacity: 0更安全 - 样式表通过
@import或 media 查询延迟加载，@keyframes可能还没注册 - 元素是 JS 动态插入的，但 class 是同步加上的，浏览器合并渲染导致首帧丢掉
- 伪元素（如
::before）没设宽高或content，压根没渲染出来
最稳的入场动画触发方式：用 DOMContentLoaded + 类名切换
比依赖 CSS 自动播放更可控，尤其适合需要等首屏内容就绪后再动的场景：
- 在
中提前引入 CSS，定义好.fade-in、.slide-up等动画类 - JS 在
DOMContentLoaded里批量给目标元素加类：el.classList.add('animate') - 为避免渲染合并，对动态挂载的元素，加个
setTimeout(() => el.classList.add('animate'), 0) - 动画属性推荐写全：
animation: fade-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both，both保证初始状态生效
@keyframes 里该用哪些属性才不卡？
入场动画要丝滑，必须避开重排（reflow），只用能走合成层的属性：
- ✅ 安全线：
transform（translateY、scale、rotate）、opacity - ❌ 高危线：
width、height、margin、left/top（触发布局计算） - 移动端加
will-change: transform提前提示合成器，但别滥用——只加在真正要动的元素上 - 如果用户开了“减少动画”偏好（
prefers-reduced-motion: reduce），建议用@media (prefers-reduced-motion: reduce)把动画时长设为0.01s或直接animation: none
真正容易被忽略的点是：动画不是越炫越好，而是要在首屏内容可交互前完成。比如一个 slide-up 动画设成 1.2s，但首屏文字 0.8s 就可读了，用户会盯着空白区域等那最后 0.4s——这时候不如拆成两段，文字先 opacity 进，卡片再 transform 进，节奏更自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
