本文目录
什么是三次贝塞尔曲线？
三次贝塞尔曲线是 CSS 中用于定义动画和过渡节奏的一种数学函数。它写作 cubic-bezier(x1, y1, x2, y2)，通过将时间映射到一条由四个控制点定义的平滑曲线上的进度，来描述动画从开始到结束的推进方式。
在 CSS 中，cubic-bezier() 函数控制着 transition-timing-function 和 animation-timing-function 属性的缓动。它让你不再局限于匀速运动，而是能够创建符合现实物理规律、感觉自然的加速与减速，使 UI 动画显得精致且有意为之。
理解四个控制值
cubic-bezier() 函数接受四个值，用以定义曲线上的两个控制点。这两个控制点决定了动画如何加速和减速。
- X1（0-1）——第一个控制点的水平位置，决定初始加速阶段何时结束
- Y1（任意值）——第一个控制点的垂直位置，控制动画起步的快慢。大于 1 的值会产生过冲效果
- X2（0-1）——第二个控制点的水平位置，决定减速阶段何时开始
- Y2（任意值）——第二个控制点的垂直位置，控制动画的收尾方式。大于 1 的值会产生回弹式的过冲
免费试用 —— 无需注册
创建三次贝塞尔曲线 →常用缓动预设及其使用时机
CSS 提供了几个内置的缓动关键字，它们对应于特定的三次贝塞尔值。理解这些预设能帮助你为动画选择合适的观感。
- ease (0.25, 0.1, 0.25, 1.0) ——CSS 默认值，起步较快随后平缓减速。适用于大多数通用过渡
- ease-in (0.42, 0, 1.0, 1.0) ——起步缓慢然后加速。最适合离开屏幕或淡出的元素
- ease-out (0, 0, 0.58, 1.0) ——起步快然后减速。非常适合进入屏幕或出现的元素
- ease-in-out (0.42, 0, 0.58, 1.0) ——起步慢、收尾慢、中间快。适合循环动画或停留在屏幕上的元素
- linear (0, 0, 1, 1) ——从头到尾匀速。适用于进度条、加载旋转器或色彩过渡等匀速更自然的场景
常见问题
所有浏览器都支持 cubic-bezier() 吗？
是的。cubic-bezier() 函数自 IE 10（2012 年）起便在所有主流浏览器中受支持。它是 CSS Transitions 和 CSS Animations 规范的一部分，在 Chrome、Firefox、Safari、Edge 以及所有现代移动端浏览器中都有完整支持。
我可以用 cubic-bezier() 创建弹簧或回弹动画吗？
三次贝塞尔曲线可以通过使用大于 1 的 Y 值（过冲）来近似简单的回弹效果。例如，cubic-bezier(0.34, 1.56, 0.64, 1) 会产生轻微的过冲。但要实现带有多次回弹的真正弹簧物理效果，则需要 CSS 的 spring()（目前尚未被广泛支持），或者使用 GSAP、Framer Motion 等 JavaScript 动画库。
CSS 过渡和 CSS 动画有什么区别？
CSS 过渡在某个属性发生变化时（例如悬停时）在两个状态之间做动画。CSS 动画则使用关键帧来定义可循环、可独立运行的多步序列。两者都使用相同的缓动函数（包括 cubic-bezier()）来控制状态或关键帧之间的缓动。