用动画“速度感”讲清 easing：让页面动起来更有分寸

在网页上做动画时，很多人都会去调 easing（动画timing-function），但往往只把它当做一个选项，很少去理解它背后的速度曲线含义，更不用说用在实际交互里去控制节奏与体验。本文就从“为什么”“怎么做”到“做到什么程度最合适”，围绕 animation-timing-function 给出可落地的思路，帮助你在不靠特效堆砌的情况下，让页面动起来更有分寸。

从体验出发：为什么需要不同的 easing

想象你在做表单提交：突然出现的反馈动画如果“嗖”地一下就完，用户很难判断提交是否成功；要是拖沓又像在等老爷车，整体会显得不专业。这就是 easing 的价值——用缓动曲线控制动画的开始、中间和结束阶段，让加速与减速的节奏匹配用户的预期。

常见曲线与场景

• linear：匀速变化，适合需要精确时间控制的场景，如数据图表的逐步展示，能保证节奏可控。
• ease-in：开始加速，适合让元素“有呼吸感”地出现，比如弹窗的入场或焦点的突出。
• ease-out：结束时加速，常用于收尾阶段，比如关闭菜单或隐藏提示信息，让结束更自然。
• ease-in-out：两端加速、中间慢，适合来回切换的交互，如标签页切换或按钮的微动效，能减少视觉疲劳。
• cubic-bezier(x1,y1,x2,y2,x3,y3,x4,y4)：自定义曲线，提供最大的自由度，可针对具体交互节奏进行精确调整。

思路：用 easing 设计“预期节奏”

动画的“开场”与“收尾”要温和

页面的“入场”和“离开”通常最容易影响体验。把开始和结束的加速控制好，能降低突兀感。例如，让弹窗入场时“先慢后快”，在关键信息出现时达到峰值，再逐渐“放慢”，给人稳重而有节奏的感觉。

中段的“加速”点要适度

很多动画在中段需要一个峰值，用来强化某种状态或动作。但峰值过大会造成“被推着走”的压迫感，峰值过小又显得犹豫。通过 easing 的控制，可以在不改变时间总长的前提下，让动画更“有力度”。

复杂交互：来回切换的节奏设计

像标签页切换、导航展开这类交互，往往需要在“展开”和“收拢”两端都做出把控。选择 ease-in-out 能在中间保持稳定，避免出现“先拖到尽头再加速”的生硬感，同时也可以用 cubic-bezier 自定义更细腻的过渡。

实操：在代码里落地 easing

在 CSS 中，animation-timing-function 是一个独立的属性，可以单独设置，也可与 animation 的其他属性同场使用：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

如果需要更精细的控制，直接使用 cubic-bezier：

.custom {
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1);
}

边界与取舍：何时不使用 easing

并不是所有场景都需要“缓和”的 easing。当动画目标明确、节奏要求极精确时（如步进式图表的逐点更新），使用 linear 可以避免不必要的“过渡感”，保证时间与行为一致。在这些边界场景里，明确的节奏优先于平滑的过渡。

结语

动画的真正力量，不在于让它看起来“很美”，而在于它是否能让用户在不同状态间顺畅地理解与预期。通过精心选择或自定义 easing，你可以让页面的每个小动效都“说人话”，既高效又舒服。从“要不要动”到“怎么动好”，都掌握在你手里。