页面加载后通过添加class触发CSS进场动画是轻量可复用的动效方案：元素默认设透明缩放等初始态，用@keyframes+transition定义动画，JS在DOMContentLoaded后加class，配合prefers-reduced-motion提升可访问性。
页面加载后通过添加 class 触发 CSS 进场动画，是实现轻量、可复用动效的常用方式。核心思路是：元素默认有基础样式（如透明、缩放为 0），再用一个 class 定义动画关键帧和过渡效果，JS 在 DOM 加载完成后给元素加上这个 class，CSS 自动播放动画。
1. 写好动画的 CSS 规则
推荐使用 @keyframes + transition 组合，兼顾控制力与性能：
- 用
opacity和transform（如scale、translateY）做动画属性，它们能触发硬件加速，不触发重排 - 避免对
width、height、left、top等会引发重排的属性做动画 - 给目标元素设置初始状态（隐藏/未动画态），再定义带动画的 class
示例：
.box {
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: opacity 0.4s ease, transform 0.4s ease;
}
<p>.box.appear {
opacity: 1;
transform: translateY(0) scale(1);
}2. 页面加载后 JS 添加 class
确保 DOM 已就绪再操作，推荐用 DOMContentLoaded 或 document.readyState：
立即学习“前端免费学习笔记（深入）”；
- 如果只针对首屏可见元素，可直接在
<script>中执行 - 若需懒加载（滚动到才动），后续再加 IntersectionObserver 逻辑
简单写法：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.box').forEach(el => {
el.classList.add('appear');
});
});3. 避免「闪一下」或动画不触发
常见问题及解法：
-
动画没播：检查 class 是否拼写正确；确认元素初始状态与动画起始帧一致（如
opacity: 0必须存在） -
页面刚打开时内容先显示再消失再动画：把初始隐藏样式（
opacity: 0）写在 HTML 标签的style属性里，或确保 CSS 在 HTML 之前加载 -
多个元素同时触发太生硬：加随机延迟或 stagger 效果，例如：
el.style.transitionDelay = Math.random() * 0.3 + 's';
4. 进阶：支持 prefers-reduced-motion
尊重用户系统偏好，减少或禁用动画：
@media (prefers-reduced-motion: reduce) {
.box,
.box.appear {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}这样既保持体验，又兼顾可访问性。
