你可能会说
页面切换太生硬了，帮我加一些过渡动画，淡入淡出那种。
动画是界面元素随时间变化的视觉过渡——让交互有反馈、页面有节奏、体验更流畅自然。
让页面元素平滑地从一个状态变到另一个状态，而不是「啪」地一下跳变。包括淡入淡出、滑动、缩放、旋转等。
生活类比
像翻书和瞬间切换幻灯片——动画让过渡自然，用户不会觉得突兀。
🎮 动手试试
动画让状态变化有「过渡」，用户不会觉得突兀。这就是 transition / animation 的价值。
以下哪个 CSS 属性变化不会触发重排（reflow），性能最好？
你可以这样告诉 AI
帮我给这个列表加动画：项目依次淡入（stagger 效果），hover 时上浮 2px + 阴影加深，用 Framer Motion 实现。
过渡是两态之间的简单变化（如 hover 变色），动画可以是多步骤、有关键帧的复杂序列。
加载动画只是动画的一种应用场景，动画涵盖范围更广（入场、退场、手势跟随等）。
状态变化反馈
按钮点击、开关切换、展开收起等操作需要视觉反馈
引导注意力
新内容出现、重要提示弹出，用动画引导用户视线
页面过渡
路由切换、模态框弹出时避免生硬跳变
高频操作
每次按键都触发动画会让界面卡顿、分散注意力
纯数据展示
表格数据刷新不需要花哨动画，简单淡入即可
动画持续多长时间，通常 200-500ms 最舒适
速度曲线：ease-out（快入慢出）最自然
变化的属性：opacity、transform、scale、translate
多个元素依次出发的间隔时间
简单的两态变化，hover 效果首选
@keyframes 定义多步骤动画序列
声明式动画 + layoutId 共享元素过渡
复杂时间线、SVG 动画、滚动驱动