📐 贝塞尔曲线编辑器
⚡ 实时预览
💻 CSS代码
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
本CSS Cubic-Bezier缓动函数生成器是一个可视化的动画曲线编辑工具，帮助前端开发者快速调试和生成完美的CSS动画缓动效果。以下是详细使用指南：
在左侧的曲线编辑器中，你会看到两个可拖拽的控制点（青蓝色圆点）。拖动这些点可以实时调整Cubic-Bezier曲线的形状。x轴代表时间进度，y轴代表属性变化进度。拖动控制点时，下方的数值输入框和滑块会同步更新，方便精确调节。
工具内置了多种常用的缓动函数预设，包括CSS标准预设（linear、ease、ease-in、ease-out、ease-in-out）和经典动画预设（如spring弹跳效果）。点击预设按钮即可快速应用对应的曲线参数，省去手动调节的麻烦。
点击"播放动画"按钮，可以看到右侧预览区域中的方块按照当前曲线运动。勾选"循环"模式后，动画会自动循环播放，方便你反复观察动画效果，直到找到最满意的缓动曲线。
调整好曲线后，工具会自动生成对应的CSS代码（transition-timing-function格式）。点击"复制CSS"即可将代码复制到剪贴板，直接粘贴到项目中使用。点击"切换格式"可以在不同CSS写法间切换。
当控制点的x值超出0-1范围时，可以产生回弹(bounce)效果。y值超出0-1范围可以产生超调(overshoot)效果。这些效果在特定场景下非常有用，但要注意兼容性。建议在生产环境中使用时先测试目标浏览器的支持情况。
• 网页动画优化：为按钮悬停、菜单展开、弹窗出现等交互元素添加自然的动画过渡，提升用户体验。
• CSS动画调试：在开发复杂的CSS动画时，通过可视化的方式快速找到合适的缓动曲线，减少反复修改CSS的时间。
• 设计协作：设计师可以将动画效果参数化，通过Cubic-Bezier值精确传达给开发者，确保设计还原度。
• 学习教学：帮助初学者直观理解缓动函数的工作原理，通过拖拽控制点观察曲线变化与动画效果的关系。
• 动画库适配：为GSAP、Framer Motion等动画库配置自定义缓动函数时，可以先用本工具预览效果，再转换为对应库的API参数。
Cubic-Bezier曲线是计算机图形学中的基本曲线之一，由四个控制点P0、P1、P2、P3定义。其中P0固定在(0,0)，P3固定在(1,1)，P1和P2就是你在编辑器中拖拽的两个点。曲线方程为：B(t)=(1-t)^3*P0+3(1-t)^2*t*P1+3(1-t)*t^2*P2+t^3*P3，其中t∈[0,1]。
在CSS中，缓动函数可以应用于两种属性：transition-timing-function 用于过渡效果（元素状态变化时的过渡），animation-timing-function 用于关键帧动画（@keyframes 定义的动画序列）。本工具生成的Cubic-Bezier值可以同时用于这两种场景。
在CSS动画中，尽量使用 transform 和 opacity 属性，因为浏览器可以对这些属性进行GPU加速。避免在动画中改变 width、height、top、left 等会触发重排的属性。同时，复杂的Cubic-Bezier曲线可能会增加计算开销，在低端设备上可能导致掉帧。
Cubic-Bezier是一种数学曲线，用于定义CSS动画中属性的变化速率。它由四个控制点(x1,y1,x2,y2)定义，通过调整这些点可以创造出从线性到各种复杂节奏的动画效果。
在Cubic-Bezier曲线中，x轴代表时间进度(0到1)，y轴代表属性值的变化进度(0到1)。通过调整控制点的位置，可以控制动画在不同时间点的加速或减速。
CSS内置了linear(线性)、ease(默认)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)等缓动函数。这些都可以用Cubic-Bezier值来表示，例如linear对应cubic-bezier(0,0,1,1)，ease对应cubic-bezier(0.25,0.1,0.25,1)。
可以。当x1或x2超出0-1范围时，会产生回弹(bounce)或超调(overshoot)效果。但需要注意，超出范围的值可能导致动画在某些时刻反向运动，需要谨慎使用。
可以。本工具采用响应式设计，在手机浏览器上也能正常使用。你可以通过触摸拖动控制点，但由于屏幕尺寸限制，建议使用平板或桌面浏览器获得最佳体验。
Cubic-Bezier缓动函数在现代浏览器中都有良好的支持（Chrome 4+、Firefox 4+、Safari 3.1+、Edge 12+）。但在一些旧版浏览器中可能需要添加 -webkit- 前缀。
大多数现代动画库都支持Cubic-Bezier缓动函数。在GSAP中，你可以使用 ease: "cubic-bezier(0.25, 0.1, 0.25, 1)" 或 ease: CustomEase.create("custom", "0.25, 0.1, 0.25, 1")。
Cubic-Bezier只定义了时间-值的关系，动画的自然感还取决于动画持续时间、元素大小、移动距离等因素。建议在实际项目中调整这些参数配合使用。