动画应精简必要，仅用于状态变化、注意力引导和操作反馈，如按钮点击、菜单展开等核心交互；时长宜为200–250ms，选用ease-out缓动，避免重排属性，尊重prefers-reduced-motion偏好。
动画不是越多越好，关键在“必要时才出现”。如果页面处处都在动，用户会分心、疲劳，甚至觉得卡顿或廉价。真正提升体验的动画，是那些能明确表达状态变化、引导注意力、增强操作反馈的部分。
只在核心交互点加动画
比如按钮点击、菜单展开、表单提交成功、模态框进出——这些是用户行为与系统响应直接关联的位置。其他地方如文字渐显、图标无意义浮动、背景缓慢位移，基本可以去掉。
- 按钮悬停：用细微的背景色过渡（
transition: background-color 0.2s），而非旋转+缩放+发光 - 下拉菜单：使用
transform: scaleY()+opacity组合，比纯 opacity 更自然 - 加载状态：优先用骨架屏或简洁的 pulse 动画，避免多层重叠动效
控制动画强度和时长
人眼对 100–300ms 的过渡最舒适。超过 400ms 容易感知延迟；低于 80ms 又像没动。同时避免高频变化（如不停闪烁、快速抖动），这类动画容易引发不适甚至光敏反应。
- 推荐时长：进场 250ms，退场 200ms（退场稍快，符合心理预期）
- 缓动函数选
ease-out或cubic-bezier(0.34, 1.56, 0.64, 1)，避免生硬的linear - 同一区域不叠加多个动画属性（如同时 animate
top、scale、filter）
提供关闭选项 & 尊重系统偏好
部分用户因眩晕、注意力障碍或低性能设备需要禁用动画。CSS 提供了原生支持：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-reduced-motion: reduce)全局关闭非必要动画 - 在设置页加一个「减少动画」开关，通过 class 控制动画开启/禁用
- 关键反馈动画（如按钮按压、错误提示）建议保留，仅剔除装饰性部分
用硬件加速但别滥用
transform 和 opacity 触发 GPU 加速，适合做动画；而 height、margin、left/top 会频繁触发重排，卡顿明显。
- 展开收起容器？用
max-height过渡（需设合理上限）或transform: scaleY() - 隐藏元素？优先
visibility: hidden+opacity，而非display: none配合动画 - 避免在
:hover中启动复杂 keyframes 动画，尤其在列表项上批量存在时
不复杂但容易忽略：动画的价值不在“炫”，而在“说得清”。一次点击后按钮变色、图标微动、加载图标转一圈——这些小动作，才是用户真正需要的确认感。
