动效设计原则

是什么

动效的第一原则：动效是沟通，不是表演。每个动画都应该回答一个用户的问题：「发生了什么？」回答不了任何问题的动画 = 噪音，删掉。

什么时候该动（四个正当理由）

理由	用户的问题	例子
反馈	「我点到了吗？」	按钮按压回弹、复制成功的勾
空间关系	「这个东西从哪来、到哪去了？」	弹窗从按钮位置放大、侧栏滑入滑出
引导注意力	「现在该看哪？」	新内容淡入、错误字段轻微抖动
个性	「这个产品是什么气质？」	本站首页卡片的错峰入场

时长：一张表记住

类型	时长	说明
微反馈（hover、按压）	100-200ms	再长就「迟钝」
元素出入场（淡入、展开）	200-300ms	万金油区间
区域级过渡（页面、弹窗）	300-500ms	上限，再长就烦
循环动画（加载、呼吸）	1-2s 一循环	幅度一定要小

越常用的动作，越要快

每天点几十次的按钮用 500ms 动画，一周后用户会疯。频率和时长成反比。

缓动：三种就够

缓动 = 速度的节奏。全部需求只需要三个：

/* 1. ease-out：快出慢停 —— 进场用（东西出现） */
.enter { transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1); }

/* 2. ease-in：慢起快走 —— 退场用（东西离开，让位要快） */
.leave { transition: all 200ms cubic-bezier(0.55, 0, 1, 0.45); }

/* 3. 弹性 —— 微交互的俏皮感（图标、徽章） */
.bouncy { transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }

记忆口诀：进 ease-out，出 ease-in，卖萌用弹性。永远别用 linear 做界面动效（那是循环动画专用的匀速）。

三个克制原则

1. 一次只有一个主角：页面上同时动的元素超过 2-3 个，注意力就散了。本站首页卡片虽然错峰入场，但每张卡动完就静止
2. 位移要小：入场位移 8-16px 足够，滑半个屏幕就成了动画杂技
3. 尊重系统设置：永远包在 prefers-reduced-motion 里（见下）

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise 300ms ease-out both; }
}

自查清单

• 每个动画都能说出它回答了用户的什么问题？
• hover 类 ≤ 200ms？出入场 200-300ms？
• 进场 ease-out、退场 ease-in？
• 同时运动的元素 ≤ 3 个？
• 包了 prefers-reduced-motion 了吗？

对照练习：打开首页，观察卡片的入场时长与 hover 弹跳，再到CSS 动画基础看这些效果的实现代码。