当前位置：首页 > news >正文

过渡（transition）高级：贝塞尔曲线、硬件加速

news 2026/5/9 19:38:46

那个让我抓狂的“弹性动画”

2019 年，我接了一个需求：做一个购物车侧边栏，点击“结算”按钮后，侧边栏从右侧滑入，并且要有一个“回弹”效果——滑入时略微超过最终位置，再回到原位，像弹簧一样。

设计师给了我一段 After Effects 动画的缓动曲线图，说：“你照着这个曲线调一下参数就行。”

我用transition: transform 0.3s ease-out，根本做不出回弹。换了cubic-bezier()，手动调了半小时，不是弹过头就是没弹性。最后我用了@keyframes，定义 0%、80%、100% 三个关键帧，模拟出回弹。但这样代码又长又不灵活——回弹幅度是固定的，无法根据拖拽距离动态变化。

后来我读到一篇文章，讲如何用自定义贝塞尔曲线实现真正的物理弹性效果，比如cubic-bezier(0.68, -0.55, 0.265, 1.55)。一尝试，果然一个transition搞定，而且性能比关键帧更好。那一刻我意识到，贝塞尔曲线不只是那几个预设值，它是一扇通往高级动效的大门。

另一个坑是动画卡顿。移动端上，我用transition改变left和top做滑动菜单，总是掉帧，特别是在低端 Android 上。后来知道了硬件加速，改用transform: translateX()，丝般顺滑。从此，“能用transform绝不用top/left”成了我的铁律。

今天这篇文章，我想把 CSS 过渡（transition）的高级知识——贝塞尔曲线的奥秘、硬件加速的原理与实战——一次讲透。读完你会明白：如何做出“物理感”的动效，如何让动画永远保持 60fps。

第一章：过渡基础回顾——不止是“变化”

1.1 过渡的“三要素”

过渡的核心是在两个状态之间插入中间帧。实现一个平滑的过渡，你需要三个条件：

一个可过渡的属性（数值型、颜色等）
两个不同的状态（例如:hover前后）
一个过渡时间（transition-duration）

.box{width:100px;transition:width 0.3s;}.box:hover{width:200px;}

1.2 过渡的“四维参数”

简写transition: property duration timing-function delay;

property：要过渡的属性，可以是all或逗号分隔列表。
duration：时间，单位s或ms。
timing-function：缓动函数，决定动画速度曲线。
delay：延迟时间。

多个属性分别指定：

.btn{transition:background-color 0.2s ease,transform 0.1s linear;}

1.3 那些“不能过渡”的属性与替代方案

不能过渡的属性比如display（可以用visibility+opacity模拟），position（但left/top数值可以过渡），z-index（也只能瞬间变化）。关键在于寻找可替代的数值属性。

第二章：贝塞尔曲线——控制速度的魔法

2.1 标准缓动函数背后的数学

缓动函数描述的是“时间”与“属性值”之间的关系。transition-timing-function默认有五个关键字：

linear：匀速，直线。
ease：慢-快-慢，默认。
ease-in：加速。
ease-out：减速。
ease-in-out：先加速后减速。

这些预设值本质上是三次贝塞尔曲线的特殊案例。贝塞尔曲线由四个点定义：起点(0,0)，终点(1,1)，以及两个控制点(x1,y1)和(x2,y2)。

cubic-bezier(x1, y1, x2, y2)允许你自定义中间两个点。x值必须在[0,1]之间，y可以超出这个范围（实现弹跳效果）。

常见预设值的等价贝塞尔曲线：

linear:cubic-bezier(0,0,1,1)
ease:cubic-bezier(0.25,0.1,0.25,1)
ease-in:cubic-bezier(0.42,0,1,1)
ease-out:cubic-bezier(0,0,0.58,1)
ease-in-out:cubic-bezier(0.42,0,0.58,1)

2.2 自定义贝塞尔曲线——做出“弹性”效果

当你想要一个动画结束时“过头”一点再回来（弹性），你需要让曲线在终点附近超过1。例如cubic-bezier(0.68, -0.55, 0.265, 1.55)。

解读：

起点 (0,0)
第一个控制点 x1=0.68, y1=-0.55（负值！，表示一开始会反向运动）
第二个控制点 x2=0.265, y2=1.55（超过1，表示结束时超过目标值）

最终效果：元素先稍微向后（负方向），然后快速向前并超过终点，最后回到终点。

这种曲线可用于模拟物理弹簧、滑出回弹等效果。

2.3 实战：制作一个“摇晃”的提示框

@keyframesshake{0%, 100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}.notification{animation:shake 0.3s ease-in-out;}

用关键帧实现很方便。但如果只用transition，比如让按钮在:active时缩小并带有弹跳感，可以用贝塞尔曲线：

.button:active{transform:scale(0.9);transition:transform 0.1scubic-bezier(0.5,-0.5,0.5,1.5);}

按下时按钮缩小到 0.9，但因为有弹跳曲线，它会稍微缩过头再弹回 0.9，感知上更有“按压感”。

2.4 工具与调试

Chrome DevTools：在 Elements 面板的 Styles 栏，点击transition旁边的紫色小方块，可以打开可视化贝塞尔曲线编辑器，拖动控制点实时预览。
在线工具：cubic-bezier.com，可以直接设计曲线并复制代码。
浏览器的“动效检查器”可以显示动画速率曲线。

2.5`steps()`——阶跃函数

除了贝塞尔曲线，还有steps(number, position)用于分步动画，比如实现数字时钟、打字机效果。它不是平滑过渡，而是突然跳跃。

.counter{transition:all 1ssteps(10,end);}

2.6 贝塞尔曲线的局限与替代

复杂物理效果（如重力、摩擦力）最好用 JavaScript 库（如 Popmotion 或 GSAP），因为贝塞尔曲线只能描述一条固定的路径，无法根据动态速度响应交互。但绝大多数 UI 动效，贝塞尔足够。

第三章：硬件加速——让动画飞起来

3.1 为什么动画会卡顿？

浏览器的渲染流水线大致为：JavaScript → Style → Layout → Paint → Composite。

Layout（重排）：计算元素的位置和大小。改变width、height、margin、left、top等几何属性会触发 Layout，开销最大。
Paint（重绘）：填充像素，改变color、background、box-shadow等视觉属性触发 Paint，开销中等。
Composite（合成）：将多个图层合并到屏幕。只触发 Composite 的属性包括transform和opacity，开销最小，通常在 GPU 中进行。

所以，动画卡顿的根本原因是频繁触发 Layout 或 Paint，导致主线程繁忙，无法在 16.6ms 内完成一帧。

3.2 硬件加速原理：GPU 来帮忙

GPU（图形处理单元）擅长并行处理图像合成。当元素应用transform或opacity时，浏览器会将该元素提升为独立的合成层，后续动画只需要在 GPU 中改变该层的矩阵或透明度，无需主线程参与 Layout/Paint。

因此“硬件加速”其实是指利用合成层进行动画，让 GPU 分担计算。

3.3 哪些属性触发合成？

transform（包括translate、scale、rotate、skew）
opacity
filter（部分浏览器可能触发合成，但性能不如前两者）

为了强制提升合成层，可以使用will-change: transform;或transform: translateZ(0);（又称“hack”）。

3.4`will-change`的正确用法

will-change提醒浏览器某个元素将要发生某种变化，提前创建合成层。

.element{will-change:transform;}

但不要滥用！每一个合成层都会占用内存。如果大量元素都有will-change，内存爆满，反而性能下降。

最佳实践：

在交互即将发生时（如:hover或 JS 添加类），才设置will-change，动画结束后移除。
不要静态写在样式里，尤其对于大量元素。

element.addEventListener('mouseenter',()=>{element.style.willChange='transform';});element.addEventListener('transitionend',()=>{element.style.willChange='auto';});

3.5 实战：从卡顿到丝滑

错误示范（卡顿）：

.box{transition:left 0.3s;position:relative;left:0;}.box:hover{left:100px;}

每次left变化都会触发 Layout，卡顿。

正确示范（硬件加速）：

.box{transition:transform 0.3s;transform:translateX(0);}.box:hover{transform:translateX(100px);}

只有 Composite，流畅。

3.6 隐式合成与层爆炸

有时你明明只给了一个元素加transform，但浏览器发现它与其他元素重叠，且其他元素有特殊属性（比如z-index、position），就会强行将那些元素也提升为合成层，导致层爆炸。

避免方式：

尽量避免复杂的重叠层级。
使用contain: layout等属性限制范围。
在 Chrome DevTools 的 Layers 面板中查看有多少合成层，排查多余层。

第四章：实战案例——高级动效

4.1 案例一：弹性侧边栏菜单

<divclass="menu"><ul>...</ul></div><buttonclass="toggle">打开菜单</button>

.menu{position:fixed;top:0;left:0;width:250px;height:100%;background:#333;transform:translateX(-100%);transition:transform 0.4scubic-bezier(0.34,1.2,0.64,1);}.menu.open{transform:translateX(0);}

document.querySelector('.toggle').addEventListener('click',()=>{document.querySelector('.menu').classList.toggle('open');});

使用的贝塞尔曲线cubic-bezier(0.34, 1.2, 0.64, 1)会略微超过终点再弹回，产生弹性感。同时由于使用transform，硬件加速。

4.2 案例二：交错动画（stagger）利用`transition-delay`

.list-item{transition:all 0.3s ease-out;transition-delay:calc(var(--index)* 0.05s);opacity:0;transform:translateY(20px);}.list-item.show{opacity:1;transform:translateY(0);}

HTML 中为每个li设置style="--index: 1"等。transition-delay基于 CSS 变量计算，实现逐个入场。

4.3 案例三：3D 翻转卡片（硬件加速 + 贝塞尔）

.card{width:200px;height:300px;transition:transform 0.6scubic-bezier(0.23,1,0.32,1);transform-style:preserve-3d;}.card:hover{transform:rotateY(180deg);}

transform-style: preserve-3d使子元素在 3D 空间，但注意backface-visibility。

4.4 案例四：通知条自动滑出并消失

.notice{transform:translateY(-100%);transition:transform 0.3scubic-bezier(0.5,-0.3,0.3,1.2),opacity 0.2s 0.2s;opacity:0;}.notice.show{transform:translateY(0);opacity:1;}