动效设计的最高境界，是让用户感受到舒适而察觉不到动画的存在。
为什么需要动效
动效不是装饰，它有明确的功能目的：
- 引导注意力 — 告诉用户"看这里"
- 反馈操作 — 确认用户的行为已被接收
- 建立空间感 — 元素从哪来、到哪去
- 传递品牌性格 — 活泼或沉稳，通过运动节奏表达
过度动效的陷阱
我见过太多网站把动效当成炫技的工具。页面加载时所有元素都在飞来飞去，滚动时每个区块都有不同的特效。
结果是：用户感到眩晕和疲惫。
判断动效是否过度的标准
- 如果去掉这个动效，用户体验会变差吗？
- 用户第十次看到这个动效，还会觉得有趣吗？
- 这个动效是否延迟了用户获取信息？
如果答案是"否、否、是"，那就去掉它。
我的动效原则
1. 时长控制
- 微交互：150-300ms
- 页面转场：400-600ms
- 复杂动画：800-1200ms
超过 1 秒的动效要格外谨慎。
2. 缓动函数
/* 自然的缓出 — 适合大多数场景 */
ease-out: cubic-bezier(0.23, 1, 0.32, 1)
/* 弹性效果 — 适合趣味性强的场景 */
elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55)
线性运动几乎永远不是好选择。自然界中没有匀速运动。
3. 错开节奏
当多个元素同时出现时，给它们 50-100ms 的间隔（stagger），创造出波浪般的韵律感。这比所有元素同时弹出要优雅得多。
尊重用户偏好
永远记得检查 prefers-reduced-motion 设置。有些用户对动效敏感，我们应该尊重他们的选择。
好的动效像呼吸——自然、无声、不可或缺。