无需登录 数据私有 本地保存

CSS缓动函数生成器 - Cubic-Bezier曲线编辑

14
0
0
0
动画预览 循环周期 2.5s
控制点坐标
P1
P2
CSS 代码
cubic-bezier(0.25, 0.1, 0.25, 1)

直接粘贴到CSS的 animation-timing-function 或 transition-timing-function 中使用。

常用预设
常见问题 (FAQ)
什么是 Cubic-Bezier 缓动函数？
Cubic-Bezier（三次贝塞尔曲线）是CSS中用于定义动画速度变化的核心函数。它通过两个控制点P1(x1,y1)和P2(x2,y2)来精确描述动画从开始到结束的速度曲线。起点固定为(0,0)，终点固定为(1,1)，控制点的位置决定了动画在每一时刻的进展速度。x轴代表时间进度（0到1），y轴代表动画完成进度（0到1）。这是实现流畅、自然动画效果的基础工具。
如何在CSS中使用 cubic-bezier？
使用方式非常简单，将生成的cubic-bezier(x1, y1, x2, y2)直接作为CSS属性值即可：

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
或
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

它可以用在任何支持timing-function的CSS属性中，包括animation、transition等。本工具生成的代码可以直接复制粘贴使用。
四个参数分别代表什么？为什么x值限制在0-1？
参数含义：cubic-bezier(x1, y1, x2, y2)中，P1(x1,y1)和P2(x2,y2)是两个控制点。

x值限制原因：根据CSS规范，x1和x2必须限制在[0,1]范围内。因为x轴代表时间，时间不能倒退也不能超越动画的总时长。如果x值超出范围，浏览器会自动将其截断（clamp）到[0,1]。

y值可以超出：y1和y2可以超出[0,1]范围！这正是创建"弹跳效果"、"过冲效果"的关键——当y值超出1时，动画会超过目标位置再回弹；当y值低于0时，动画会先反向移动一段距离。
有哪些常用的缓动函数预设？如何选择？
常用的预设包括：
• ease（默认）：动画缓慢开始、加速、再缓慢结束，适合大多数UI动画
• ease-in：缓慢开始，适合元素退场动画
• ease-out：缓慢结束，适合元素入场动画
• ease-in-out：两端缓慢，适合循环动画
• linear：匀速，适合加载进度条等
• easeOutBack：带"过冲回弹"效果，生动活泼
• easeInOutBack：两端都有弹性效果

选择原则：入场用ease-out系列，退场用ease-in系列，持续循环用ease-in-out，需要弹性趣味用Back系列。
y值超出0-1范围会发生什么？如何创建弹跳效果？
当y值超出[0,1]范围时，动画会产生"过冲"或"预冲"效果：
• y > 1：动画会超过目标值，然后回弹（如easeOutBack的y2=1.275）
• y < 0：动画开始时会先反向移动一小段距离

创建弹跳效果的关键是让控制点的y值超出1。例如cubic-bezier(0.175, 0.885, 0.32, 1.275)就是一个经典的缓出弹跳效果。在本工具中，你可以将控制点向上拖拽超出顶部边界来创建这种效果。
如何在JavaScript中使用cubic-bezier？
在JavaScript中，你可以通过Web Animations API使用cubic-bezier：
element.animate([...], { easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' });

或者使用GSAP等动画库：
gsap.to(element, { x: 100, ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)' });

也可以手动实现贝塞尔曲线计算，使用德卡斯特里奥算法或直接使用三次贝塞尔公式在代码中计算任意时间点的动画进度。
🔧 相关工具