CSS transition 可通过 opacity 和 transform 实现平滑入场动画，需结合 JS 控制触发时机，优先使用性能友好的属性，统一过渡时长与缓动函数，并避免滥用影响性能。
页面加载生硬，通常是因为元素突然出现或尺寸/颜色瞬间变化，缺少视觉缓冲。用 CSS transition 可以让属性变化平滑过渡，显著提升感知流畅度。
给关键元素加入场过渡
纯 CSS 无法直接控制“首次加载时的入场动画”，但可通过结合 opacity 和 transform 配合初始状态实现类入场效果：
- 给容器（如
.card、.hero）设初始状态：opacity: 0; transform: translateY(20px); - 添加过渡声明：
transition: opacity 0.4s ease, transform 0.4s ease; - 在 DOM 加载完成（如 JS 中）或利用
:not(.loaded)+ JS 添加 class 触发变化：opacity: 1; transform: translateY(0);
注意：过渡必须作用在**会变化的属性**上，且前后值需明确（不能从 auto 过渡到具体值）。
避免过渡滥用导致卡顿
不是所有属性都适合过渡，尤其影响重排（reflow）的属性（如 width、height、left）可能引发性能问题：
立即学习“前端免费学习笔记（深入）”；
- 优先使用仅触发重绘（repaint）或合成（composite）的属性：
opacity、transform（translate/scale/rotate） - 避免对
margin、padding、font-size等频繁触发布局计算的属性做长时长过渡 - 用
will-change: transform;提前提示浏览器优化（仅在必要时加）
统一过渡节奏，增强一致性
零散的过渡时间或缓动函数会让页面显得杂乱。建议建立基础规范：
- 微交互（按钮悬停、开关切换）：200–300ms，
ease-in-out - 模块入场/折叠：400–500ms，
cubic-bezier(0.25, 0.46, 0.45, 0.94)（柔和弹入感） - 全局过渡声明可写在 :root 或基础类中，例如：
* { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }，再针对性覆盖禁用项（如表单输入框）
配合 JS 控制过渡时机更可靠
CSS 过渡本身不感知加载完成，需 JS 协同确保元素“准备好再动”：
- 监听
DOMContentLoaded或load事件后，批量为元素添加.is-loaded类 - 用
IntersectionObserver实现懒加载区域的渐入（滚动到视口再触发动画） - 过渡结束后用
transitionend事件清理 class 或启用交互，避免重复触发
不复杂但容易忽略。过渡不是加了就高级，关键是让变化有依据、有节奏、不抢戏。
