CSS缓动函数完全指南：从ease-out到贝塞尔曲线与steps实战

说实话，做前端动效这几年，我见过很多开发同学把按钮的 transition 加上 0.3s 就觉得大功告成，结果交上去后被设计师一句“动画很生硬”打回。问题往往不在时长，而在一个最容易被忽略的细节——缓动函数。很多 CSS 动画之所以看起来像“尸体在平移”，就是因为从头到尾都是线性运动，而现实世界几乎没有东西会匀速运动。这篇文章就专门把缓动函数这件事讲透：它到底是什么、为什么能让动画有真实感、内置的几种曲线该怎么选、自定义 cubic-bezier() 怎么调出弹簧质感，以及我在项目里踩过的各种坑。无论是刚入门的前端，还是被动效折磨过的 UI 开发，甚至是想理解动画原理的交互设计师，都能在这篇里找到可以直接抄的答案。

1. 缓动函数到底在解决什么问题

1.1 “匀速”其实是假象

我们先想一个生活场景：你推一个放满书的行李箱，从静止到动起来，是不是要花很大力气，一开始速度特别慢，然后才越推越快？反过来，你让行李箱滑行到墙边停下，它也不会突然“啪”一下定住，而是会先快速滑动、再慢慢减速、最后才停稳。这种“启动慢、中途快、结束慢”的节奏，才是真实世界里物体运动的常态。

而 CSS 默认的 linear（线性）缓动，等于把一个物体的速度全程锁死，从头到尾都没变化。你想想，现实生活中哪有物体能瞬间从 0 加速到匀速，再瞬间从匀速降回 0？没有。所以使用 linear 做 UI 动效时，人的眼睛会下意识地觉得“不对劲”，但又说不上哪里不对。这种直觉差异，就来自物理世界和数字世界的节奏冲突。

缓动函数解决的就是这个冲突。它的本质是“给时间加滤镜”：动画从 0% 跑到 100% 的过程中，每到一个时间点究竟该完成多少进度，由缓动函数说了算。线性缓动就像把 1 秒平均切分成 100 份，每秒完成的比例完全一样；而缓动曲线则可以把前 200ms 的完成度压低、把中间 200ms 的完成度拉高，让动画看起来像是有惯性和阻力。

1.2 用“变速箱”理解缓动函数

你可以把 CSS 动画的播放想象成开车：时间轴是一条路，元素是车，而缓动函数就是变速箱和油门踏板的配合逻辑。linear 相当于定速巡航，全程一个速度；ease-out 则是起步时给了一脚大油门、之后慢慢松开；ease-in 相反，前段一直在轻点油门，后段才猛踩下去。

这里有一个关键认知：缓动函数改变的并不是“动画要不要播”，而是“每一帧里元素的属性值到底走到哪”。transition 的 1s 不会因为曲线而变长或变短，变的只是第 300ms 时，元素是已经走了 70% 还是只走了 30%。理解这一点很重要，因为你做动效节奏控制时，头脑里要有“完成度”这个概念，而不是简单觉得“动画就是属性从 A 变成 B”。

1.3 三种常见的写法位置

CSS 里使用缓动函数有三个层面：

• 写在 transition 简写属性里，例如 transition: transform 0.3s ease-out；
• 写在 animation 简写属性里，例如 animation: fadeIn 0.6s cubic-bezier(.16,1,.3,1)；
• 写在 @keyframes 内部的具体关键帧上，例如在 40% 处设置 animation-timing-function: ease-in，这会让关键帧到下一个关键帧之间的片段使用该曲线。

前两种大家应该很熟，第三种容易被忽略。它的用途很有意思：如果你一段动画里有多个阶段，比如一个小球先减速上升、再加速下落，你不可能用一个全局缓动函数同时满足这两个阶段，就得在关键帧中间切换曲线。后面我会专门写一个例子说明怎么写。

2. 四种内置缓动曲线，到底该怎么选

2.1 先给四个“默认选手”做个性格测试

CSS 里最常用的四个内置值，每个都有鲜明的“性格”，我把它们对照记忆成不同的人走路方式，你一下就能分清：

• ease：默认值，相当于一个“谨慎的普通人”。起步稍慢，中段加速，后段再慢下来。整体比较平均，适合大多数通用过渡，但动效偏柔。
• ease-in：相当于“拖着沉重货物的人”，一开始很费劲，速度起不来，越到后面越快，冲劲很足。适合做出场、下落、被移出视野的效果。
• ease-out：相当于“正常起步然后准备靠站停车的人”，起步很干脆，后段有优雅的刹车感。适合入场、展开、出现类动效。
• ease-in-out：相当于“地铁列车进站出站”，两头都慢，中间快。适合做来回循环的动画，比如 loading 旋转、脉动呼吸灯、模态框在屏幕中央放大缩小。

很多人以为 ease 和 ease-in-out 差不多，但实际用起来差异很大。ease 的前半段速度偏快，适合短平快的 hover 反馈；ease-in-out 的两头减速会拉长开始和结束时的“存在感”，更适合展示型动效，不适合那种需要立刻响应的微交互。

2.2 用一张表快速选型

我在实际项目里通常会按动效的用途做快速匹配，整理成下面这张选型表，基本 90% 的 UI 场景都能覆盖：

表里的贝塞尔曲线参数你不需要背，先记结论，后面我会解释怎么理解这些参数。

2.3 从物理过程推导曲线选择

很多人记不住什么时候用 ease-in、什么时候用 ease-out，我教你一个“无脑推导法”：想象这个元素此刻在真实世界里正在干一件什么事。

举个例子：一张卡片从屏幕底部滑入。现实里卡片应该是被一个力推动着出现的。物体被推动后，通常不会上来就有最大速度，而是有一段加速过程。但对于 UI 入场，用户注意力才刚过来，如果动画前半段太慢，用户会觉得“半天还进不来”。所以 UI 入场要用 ease-out：让动画立即达到高速度，元素快速出现在视野里，后段靠阻尼感停下来，整体显得干脆且不突兀。

反过来，如果元素要离开屏幕，比如一条消息提示从右上角被“关闭”，它的移动方向是远离用户视野。此时用 ease-out 反而不好：末尾速度慢下来，用户会看到它在视野边缘磨磨蹭蹭，注意力被拖住。换成 ease-in，让它先慢悠悠动起来，最后阶段突然提速“唰”地消失，视觉上更干净利落。

这就是设计物理和现实物理的差别：现实世界里，离场并不会有“故意加速”这种情绪，但在 UI 里，这种缓动恰恰符合人们希望“关闭动作尽快完成”的心理预期。你只要记住一句话：入场求快感用 ease-out，离场求果断用 ease-in，循环节奏用 ease-in-out，匀速移动用 linear。 这样绝大多数选择都不会出错。

3. cubic-bezier()：把节奏控制权拿回自己手里

3.1 四参数到底是什么意思

内置曲线虽然方便，但用久了你会发现不够用。ease-out 尾部减速太慢，导致很多按钮 hover 完要发呆一会儿；ease-in 又常常前半段慢得让人想砸键盘。这时候就需要 cubic-bezier() 来自己定义节奏。

cubic-bezier() 接收四个参数：cubic-bezier(x1, y1, x2, y2)。这四个参数描述的是两条控制点的坐标。CSS 的贝塞尔曲线始终从 (0, 0) 出发，到 (1, 1) 结束，所以你只需要控制两个中间点，就能改变斜率走向。

怎么理解？你把 (0,0) 到 (1,1) 想象成一张对角线，它代表线性进度：时间过去了多少，动画就完成了多少。中间两个控制点决定了曲线是在对角线上面还是下面。曲线在对角线上方，代表同一时间动画完成度更高、速度更快；曲线在对角线下方，代表动画滞后于时间。

这里有一个容易踩的误区：x 代表时间，y 代表完成度，所以 x 值如果超过 0 到 1 的范围，意味着时间往回倒退，这不符合动画播放逻辑，所以 CSS 强制要求 x1 和 x2 必须在 0 到 1 之间。但 y 值不受此限制，可以大于 1 或小于 0。y 大于 1 时，动画在某个瞬间会“超调”——先跑到目标的更远处，再回落到终点，这就是我们常说的“弹簧回弹”效果。

3.2 一个适合大多数 UI 的“万能缓出曲线”

我做过大量改动效抠细节的项目，如果只让我推荐一条必须背下来的自定义曲线，那一定是：

css复制cubic-bezier(.16, 1, .3, 1)

它被称为 “ease-out-expo”，意思是“指数级缓出”。和内置 ease-out 相比，这条曲线在开头大概 30% 的时间内就把动画推进了一大半，速度极快，后段则用很长的时间做精细落地。你可以把这条曲线用于几乎所有带位移、缩放、透明度变化的入场动效：侧边栏滑入、卡片浮起、列表展开。视觉上比 ease-out 利落得多，不会拖泥带水。

我在生产项目里通常把这一组自定义缓动放到 CSS 变量里统一管理，方便复用：

css复制:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
}

这样后续写 transition 就不用每次复制一串神秘数字，可读性也更高。

3.3 手把手调一个“弹簧缩放”效果

举个最常见的实战例子：一个收藏按钮，点击后小星星要“弹一下”，并且有点回弹的俏皮感。纯靠 ease-out 只能做到“从大变小”，缺少物理曲线中那种越过终点再回弹的细节。

我的做法是配合一个类名切换：

html复制<button class="fav-btn" onclick="this.classList.toggle('is-active')">收藏</button>

css复制.fav-btn {
  transform: scale(1);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.fav-btn.is-active {
  transform: scale(1.25);
}

注意我用了 0.35s，而不是常见的 0.3s，因为回弹动作需要额外的余量。如果时长太短，比如 0.15s，在用户还没看清回弹前动画就结束了，效果会变成“抖了一下”，而不是“弹了一下”。

你再观察这段曲线：x1=0.34, y1=1.56。y1 大于 1 就意味着动画在播放中会先超出终点（scale 超过 1.25），然后慢慢回落。落地那一瞬间带来的“微微弹动”，在人眼看来非常接近物理世界中物体碰到硬表面后的振动。但其实放大 1.25 倍时这个回弹幅度很小，用户不会觉得夸张，只会在潜意识里觉得“这个按钮好有手感”。

3.4 在 DevTools 里调出你想要的曲线

如果不想凭空想象参数，最简单的方法是用浏览器开发者工具调。在 Chrome DevTools 的 Sources 面板或 Elements 面板里定位到元素，找到 transition 属性，点击属性值旁边的曲线小图标，就能打开缓动编辑器。

编辑器里左边是一堆预设曲线，右边是当前曲线的可视化坐标轴。你可以直接用鼠标拖拽 P1、P2 两个控制点，调整后动画会立即在当前页面上循环播放预览，不需要刷新。这个方法非常适合调 spring 类曲线：你先从预设的 ease-out 开始，然后把第一个控制点的 y 慢慢往上拖超过 1，回弹感会立刻出现，拖过头了又成了“抽风”，多试几次就知道每个位置带来什么手感了。

有一点要注意：DevTools 里可视化看到的曲线是进度完成度曲线，而不是元素在页面上的运动轨迹。看到曲线掉到对角线下方，不意味着元素会倒退，只表示它这一时刻的相对速度比线性慢。

4. steps()：给机械感与逐帧动画准备的节奏器

4.1 什么时候用阶梯曲线

缓动函数并不只有平滑曲线这一种，CSS 里还有一个非常实用但很多人不熟的取值方式：steps()。它的作用是让动画值“一格格跳变”，而不是连续过渡。

你可能会问：真实感不是应该尽量平滑吗？用阶梯函数不反而失真？这要看你模拟的是什么物体。机械钟表的秒针、地铁到站时闪烁的指示灯、老式翻页广告牌、像素游戏里的角色跑步……这些物体的运动本身就是离散的，它们每一次变化都是一次“瞬间跳变”。对这类对象做动画，如果用了平滑曲线，反而会显得像液体一样虚假。用 steps() 才是对真实感的还原。

Steps 的语法是 steps(n, direction)：n 表示把动画总时长切成多少段，direction 可以省略，默认是 end。比如 steps(4, end) 表示动画会像走四级台阶一样，每一段播放完才跳到下一个值，等达到 100% 后立刻结束。

4.2 打字机效果：最直观的 steps 应用

用 steps 做打字机是 CSS 社区里最经典的 demo。原理很简单：让文字的宽度从 0 变化到完整宽度，但因为每一步都是瞬间跳变，所以看起来是一个字一个字蹦出来的。

html复制<p class="typewriter">CSS 缓动函数让人着迷</p>

css复制.typewriter {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
  border-right: 2px solid #333;
  animation: typing 2s steps(12, end) forwards;
}

@keyframes typing {
  to {
    width: 13em;
  }
}

这里 steps(12, end) 里的 12 要看你有多少个字符。我示例里文字有 12 个字符，宽度最终是 13em（因为最后一个字符后面还有光标宽度），你可以根据实际内容微调。需要注意的是文字必须设置成等宽字体，否则每个字符宽度不一样，steps 跳变后会出现光标忽快忽慢或者整体对不齐的情况。forwards 也很关键，它让动画播完后保留最终宽度，否则会缩回 0。

曾经有同学问我为什么宽度用 em 而不是 px，其实这只是为了按字符数量推算宽度方便。如果你有别的场景，px 也完全没问题，steps 只关心最终值和中间分了几段，跟单位没有关系。

4.3 用 steps 做像素角色和倒计时

跑动的小人、翻页倒计时这类动画同样可以用 steps 实现。把小人的每一帧动作都放到一张横向的雪碧图里，然后通过跳变切换背景位置：

css复制.sprite-runner {
  width: 64px;
  height: 64px;
  background: url("runner.png") 0 0 no-repeat;
  animation: run 0.6s steps(6, end) infinite;
}

@keyframes run {
  from { background-position: 0 0; }
  to   { background-position: -384px 0; }
}

雪碧图如果是 6 帧，宽 64px，那么总宽度就是 384px。动画时间 0.6s 对应 6 帧，也就是每帧停留 0.1s，折合每秒 10 帧。对于像素游戏来说这个帧率够用，而且会保留那种一格一格跳动的复古味。如果你想更流畅，可以把时间缩短到 0.42s，这样每帧 0.07s，大约每秒 14 帧，跳动感仍在但更轻快。

这里有一个性能提醒：虽然 background-position 做雪碧帧动画是前端老传统，但如果雪碧图特别大或者元素数量很多，background-position 的跳变会引起较大范围的重绘，移动端低端机上容易掉帧。更稳的方案是使用 Canvas 做游戏角色动画，或者把每一帧做成独立图片后用 opacity 切换。如果场景只是装饰性 UI 元素，CSS background 方案完全没问题。

5. 实战：一段“活起来”的入场动画是怎么编排的

5.1 以模态框为例，区分遮罩、面板和内容的节奏

很多人做模态框动画，给遮罩和面板用同一个缓动同一个时长，结果面板已经到位了，遮罩还在后面慢慢变暗，或者反之，观感非常奇怪。正确的思路是“分层运镜”：遮罩负责氛围，面板负责物理空间，内容负责细节呈现。

我给一个可以套用的模板。遮罩用纯 opacity 的 ease-out，只需 0.2s，让背景快速暗下来；面板入场用带位移和缩放的 spring 曲线，持续时间稍长，产生“从底下跳上来并落定”的感觉：

css复制.modal-backdrop {
  opacity: 0;
  transition: opacity .2s ease-out;
}

.modal-backdrop.is-open {
  opacity: 1;
}

.modal-panel {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition:
    transform .32s cubic-bezier(.34, 1.56, .64, 1),
    opacity .22s ease-out;
}

.modal-panel.is-open {
  opacity: 1;
  transform: none;
}

这里的位移用了 24px，而不是特别大的值。入场动画的位移如果动辄上百像素，会给人“面板是从很远的地方飞来的”错觉，在弹窗场景里没必要。24px 配合回弹，既能看出层次感，又不会让用户觉得主内容来得太夸张。

再给列表里每一个条目加错峰延迟，让它们像排队进场一样，不要挤在一起出现，效果会立刻上一个档次：

css复制.list-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease-out, transform .3s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 45ms);
}

.list-item.is-visible {
  opacity: 1;
  transform: none;
}

HTML 里给每个 item 设置好 --i 的值即可。错峰延迟建议控制在 30ms 到 80ms 之间，间隔太小看不出错峰，太大会让用户等得不耐烦。

5.2 多阶段 keyframes：让同一个元素经历加速与减速

如果你需要一个更复杂的动作，比如一个提示徽章要“先出来、再往外凸一下、最后归位”，单靠一个缓动函数是不够的。这时得把动画拆成多段，并在关键帧中间分别指定 timing function。

css复制.badge {
  animation: badgeIn 1s both;
}

@keyframes badgeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.8);
    animation-timing-function: ease-out;
  }
  55% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

这里 0% 到 55% 使用 ease-out，完成元素从下方出现并轻微超过目标位置的阶段；55% 到 100% 使用 ease-in-out，完成从超调位置回落到正常位置的阶段。你去看这段动画，会明显感觉到“呼的一下出现，再稳稳地收住”，比单一直线有生命力太多。

一个容易犯的错是把 animation-timing-function 写在最外层 animation: badgeIn 1s both; 里，那只会作用于整段动画，内部关键帧的曲线设置会被外层覆盖。正确做法是让外层简写只写 duration 和填充模式，把缓动写到每个关键帧区段中。

5.3 “视觉补偿”比 100% 物理模拟更重要

我见过一些高端控会尝试完全用物理公式模拟弹性、阻尼、重力，比如给元素施加 -9.8m/s² 重力，用 JS 每一帧算位置。这种做法的确很“物理”，但在 UI 场景里未必是最优解。

原因是网页上的元素并没有质量和碰撞体积，我们追求的“真实感”本质是“心理上的真实”，而不是物理上的真实。一个 UI 按钮的回弹幅度如果完全按照真实弹簧的振幅衰减公式来做，反而会因为细节太微弱而看不清楚。所以在做动效时，我会故意夸张：位移距离比现实稍大一点、回弹幅度控制在 5% 到 10%、持续时间比物理模拟缩短一些，让用户一眼就能感知到动效想表达的状态。

这就是为什么我一直强调缓动函数是“节奏控制”的工具，而不只是“模拟现实的工具”。一条赛博朋克风格的弹窗，如果完全采用重力模型，整个过程可能非常死板；但如果你用 cubic-bezier(.34,1.3,.64,1) 这个略带夸张的曲线，用户反而会觉得“这个动效很有质感”。

6. 常见问题与避坑清单

6.1 动画尾部总感觉有点“卡”

一个很常见的现象：你把 transition 设成 0.5s ease-out，等动画快结束时，视觉上元素几乎不动了，于是你误以为动画卡了。其实这是 ease-out 尾部速度无限趋近于 0 带来的错觉。

解决办法通常是把时长砍短，或者改用更“果断”的曲线。我习惯先用 chrome 控制台实时调，把 ease-out 这类曲线的前半段斜率加大，比如 cubic-bezier(.16, 1, .3, 1)，同时把 duration 从 0.5s 压缩到 0.35s 左右。如果这样调整后，动画仍然让你觉得尾段拖沓，不一定是曲线的问题，可能是动画本身位移距离太大，你可以先把位移距离缩小，或把位移和透明度用不同的 duration 拆开治理，让透明度的速度快于位移速度，视觉上会更清爽。

6.2 回弹动画 “抖过头”了

回弹曲线用好了是质感，用不好就是“癫痫”。我见过有人把 cubic-bezier(.34, 1.8, .64, 1) 用在按钮 hover 上，结果每次鼠标经过，按钮都像被电打了一样弹得老高，观感很廉价。

一般回弹幅度控制要点是：y1 不能超过 2，我常用 1.3 到 1.56 之间。如果元素在视觉上比较小，回弹幅度可以稍微大一点，但如果是占满半屏的面板，回弹超过 1.2 就会显得很不稳。如果你的元素同时还有 opacity 变化，建议不要把透明度也用回弹曲线，否则会出现一瞬“透明又放大”的残影感，异常难看。正确做法是让 opacity 用 ease-out，只让 transform 用回弹曲线。

6.3 动画播放完以后又“闪”回初始状态

这个坑十有八九是忘记加填充模式。很多人写：

css复制.element {
  animation: slideIn .4s ease-out;
}

当 animation 播放完，元素会立刻恢复成动画开始前的状态。如果动画是隐藏到显示，画面就会“闪”一下，非常闹心。解决办法是在 animation 简写里最后加上 forwards：

css复制.element {
  animation: slideIn .4s ease-out forwards;
}

forwards 表示让元素保留动画 100% 关键帧时的样式。同理，如果有入场动画和离场动画两个状态切换，最好把这些状态的样式也存在普通 class 里，而不是只靠动画临时改变，否则一旦动画结束，样式就“缩水”了。

6.4 动画掉帧，多半是动了不该动的属性

我在审查团队代码时经常发现有人用 transition 做 margin、top、left、width、height 的动画。这些布局属性每一个变化都可能导致浏览器重新计算布局，接着再触发重绘，代价非常高。在低端机或列表项较多时，动画很容易一卡一顿。

正确姿势是让位移交给 transform，让透明度交给 opacity。transform 和 opacity 的动画可以在合成器线程完成，不需要反复重新布局。比如同样实现一个“向下展开”效果，不要写 margin-top: 20px 到 0，而是用 translateY(20px) 到 translateY(0)。虽然视觉最终一样，性能表现却差一个数量级。

6.5 你的动画“没生效”，也许是外层属性冲突了

有次我帮同事排查，一个 hover 放大动画死活不触发，代码看起来没问题。最后发现他在父容器设置了 transform: translateZ(0) 想开 GPU 加速，结果子元素的 transform 动画被父容器的 transform 创建了新的层叠上下文和包含块，导致他预期的坐标系或层级被干扰，动画被盖住了。

还有一次是按钮同时设置了 transition: all，和另一个单独属性 transition 发生覆盖，造成只有最后一条生效。所以写 transition 时，我建议不要图省事用 all，应该明确列出哪些属性需要动画。这样也方便你给不同属性设置不同曲线和时长，控制更精细。

6.6 用户系统偏好减弱动态效果时，该让动画退场

做动效久了你会发现，不是所有人都喜欢动画。有些用户由于视觉敏感或系统设置，会主动开启“减弱动态效果”的选项。尊重这些用户，是前端开发的基本素养。

CSS 里可以用 prefers-reduced-motion 媒体查询来检测：

css复制@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

这里没有直接把 duration 设成 0，是因为有些浏览器在动画时长为 0 时，可能无法正确触发 animationend 等事件。设置为 0.001s 既能保留事件逻辑，又能几乎瞬间完成动画，算是一个通行的小技巧。你把这层媒体查询放进公共样式后，基本不会影响正常体验，但能让一部分用户觉得你的站点很贴心。

我自己在实际项目里调缓动时，最深的体会是：别把缓动函数当成“高级功能”只在特殊场合用，它其实是每个动画的基础设施。一个按钮、一个弹窗、一个列表，这些最日常的交互，只要曲线选得对，质感立刻会拉开差距。而想真正把它调好，靠的不是背参数，而是多观察真实生活中物体是怎么启动、运动和停下来的，再把这些直觉映射成一条时间曲线。你把这个过程反反复复做上几十次，以后拿到任何动效需求，都能在几秒内心里有数。