马上默 在线轻量工具箱
登录

cubic-bezier 缓动生成器

在示波器画布上拖拽两个控制点，小球动画实时反馈手感；输出标准 cubic-bezier() 值与 transition 代码，内置 ease 系列与回弹预设，调曲线不再靠猜。

动画手感预览

当前曲线值

cubic-bezier(0.34, 1.56, 0.64, 1)

生成的 CSS

时长与时间轴取样

拖动时长滑杆改变真实动画速度；拖动时间轴可查看某一时刻的动画进度（依据贝塞尔曲线反解 t 再求 y）。

速度曲线（贝塞尔导数，自绘 SVG）

纵轴为瞬时变化速度 dy/dx，峰值越高越「冲」；负值区间表示回弹反向运动。

多格式导出


        

          
          
        

      

    


  



  

    
方案管理 · 数值对比 · 导出

    
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

  

  

    
    
    
    
    
  

  

    

    

      
最近方案 暂无

      

    

  

  









    
    

        

            
📈口径说明与常见误填

            
x 不出 0~1，曲线才合法；y 超界是回弹不是 bug。

        

        

                            

                    
控制点取值

                    
两个控制点的 x 必须落在 0~1（时间不能倒流），超出本页会标红；y 可以超出 0~1，产生回弹与过冲。

                

                            

                    
曲线含义

                    
横轴是时间进度、纵轴是动画进度：曲线越陡表示该时段变化越快，平台段表示几乎静止。

                

                            

                    
关键字等价值

                    
ease = (0.25, 0.1, 0.25, 1)、ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)、ease-in-out = (0.42, 0, 0.58, 1)，点芯片一键载入。

                

                            

                    
使用位置

                    
cubic-bezier() 可写在 transition-timing-function，也可用于 CSS animation 与 JS Web Animations API。

                

                            

                    
常见误区

                    
把回弹（y 超界）当报错删掉：回弹是合法效果，适合弹窗与开关；但列表滚动、进度条不宜用，会显得拖泥带水。

                

                    

    


    
    

        
        
        
        
        
    


    
    

        

            
这个工具解决什么问题

            
调缓动曲线最忌「凭感觉填四个数」。本页在示波器画布上拖拽两个控制点，小球位移动画实时反馈手感，曲线值与 transition 代码同步输出；内置 ease 系列与回弹、急停常用预设，x 轴非法值当场校验，纯浏览器本地运行不上传，前端与动效设计师的调曲线工作台。

            

                
三条调曲线铁律

                                    
① 先看动画再改数值：手感以小球预览为准，别只盯曲线形状；同一条曲线在 0.2s 和 1s 下观感完全不同，时长也要试。

                                    
② 交互反馈用短曲线：按钮、开关类反馈建议 0.2~0.4s 配回弹或急停；大面积转场用 0.5s 以上缓出，避免「弹过头」的廉价感。

                                    
③ 复制完整 transition：本页代码含属性、时长与曲线值，整段复制进样式表，避免只拷 cubic-bezier 值忘了配时长。

                            

        

    


    
    

        

            
怎么用

            
    
                                    
  1. 
                        
    第 1 步 · 拖拽或输入控制点
    
                        
    在画布上拖动两个端点，或直接填 x1、y1、x2、y2 四个数值，曲线即时重绘。
    
                    
    2. 
                                    
  2. 
                        
    第 2 步 · 观察小球动画手感
    
                        
    右侧「动画手感预览」循环播放位移动画，所见即浏览器里的真实效果。
    
                    
    3. 
                                    
  3. 
                        
    第 3 步 · 套用常用预设
    
                        
    点 linear / ease / ease-in-out / 回弹 / 急停芯片一键载入标准值，再微调。
    
                    
    4. 
                                    
  4. 
                        
    第 4 步 · 复制生成的 CSS
    
                        
    「生成的 CSS」区输出完整 transition 规则，点「复制 CSS」贴进样式表即可。
    
                    
    5. 
                            

        

    


    
    

        

            
更新记录

            
    
                
  • 
                    v1.0
                    2026-11-02
                    
  • 2026-11-02 上线首个版本
  • 2026-11-02 完善结果展示
    • 
                
            

        

    


    
    

        

            
常见问题

            

                                    

                        cubic-bezier 曲线怎么调？
                        
两个控制点的 x 必须落在 0~1（时间轴不回退），y 可以超出 0~1 产生回弹/过冲。直接在本页画布上拖拽端点，小球动画即时反馈手感。

                    

                                    

                        有 css 缓动函数在线工具吗？
                        
本页即在线调试台：拖拽或输入四个数值均可，曲线绘制、动画预览、代码输出三端同步，纯前端实现不上传数据。

                    

                                    

                        ease-in-out 对应的贝塞尔值是多少？
                        
CSS 关键字等价于：ease = (0.25, 0.1, 0.25, 1)、ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)、ease-in-out = (0.42, 0, 0.58, 1)，点预设芯片可一键载入。

                    

                                    

                        transition-timing-function 怎么写？
                        
形如 transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);，本页生成的代码块包含时长与完整属性，复制进样式表即可使用。

                    

                                    

                        有动画曲线生成器推荐吗？
                        
用这个：除了生成 cubic-bezier 值，还带循环播放的位移动画预览与 x 轴非法值校验，避免调出浏览器无法解析的曲线。

                    

                            

        

    


    
    

        

            


    
    

        
💬 留言板 0

        全部留言需审核通过后展示
    

        

        

        
💬

        
还没有留言，来抢沙发吧！

    

    


    
    

        
        

            ✍️ 说点什么
                            
                    


                

            
            

        

        
        

            
            
0 / 500

            

        


        

            

                
                图形验证码
            

            

        


        
    


    
    


        

    


    
            

            
🔗 相关工具

            

                                    
                        🌀
                        SVG 加载动画生成器调好缓动顺手做个 loading
                        →
                    
                                    
                        🎚
                        滚动条样式生成器页面动效细节一起打磨
                        →
                    
                                    
                        🧮
                        CSS Grid 布局演练场动画落位前先把布局摆对
                        →
                    
                                    
                        🧩
                        Tailwind 类名速查器查 transition 缓动的原子类写法
                        →
                    
                            

        

    




    

        
👣 做完这一步，顺便看看

        

                            
                    🏛️
                    
                        凯撒密码解密
                        凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换…                    
                    →
                
                            
                    🔤
                    
                        乱码转换器在线修复
                        乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱…                    
                    →
                
                            
                    📸
                    
                        代码截图美化工具
                        在线代码转图片工具：粘贴或输入代码（支持 JavaScrip…                    
                    →
                
                            
                    🎨
                    
                        WCAG 对比度检测工具
                        在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he…                    
                    →
                
                    

        全部工具 →