CSS元素进场动画实现方法

本文深入讲解了如何通过CSS与JavaScript协同实现轻量、可复用且具备可访问性的元素进场动画：利用默认隐藏样式（如`opacity: 0`和`transform: scale(0.95)`）配合`@keyframes`与`transition`定义平滑动效，再由JS在`DOMContentLoaded`后动态添加触发类来启动动画；同时涵盖避免“闪屏”、实现 stagger 延迟、以及关键的`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);
}</p>

2. 页面加载后 JS 添加 class

确保 DOM 已就绪再操作，推荐用 DOMContentLoaded 或 document.readyState：

• 如果只针对首屏可见元素，可直接在