Ceaser

由Matthew Lein开发的CSS缓动动画交互工具，通过可视化贝塞尔曲线编辑器解决cubic-bezier使用繁琐的痛点，内置Penner方程经典缓动类型，支持拖拽手柄自定义曲线并一键生成代码片段。

核心功能

提供线性、ease-in、ease-out等默认缓动及easeInQuad、easeOutBack等31种Penner方程预设，支持拖拽控制点自定义贝塞尔曲线，实时预览动画效果。

• 代码输出: 同时生成短格式(cubic-bezier)和长格式(transition-timing-function)代码片段
• 触屏适配: 支持触屏设备拖拽操作
• 捐赠支持: 页面底部提供捐赠入口以维持项目维护

资源与扩展

官网提供多个第三方扩展链接，包括Compass扩展、LESS mixin、TextMate Bundle、LESS/SASS mixin及JS库，方便开发者集成到不同工作流。

• Compass扩展: Jared Hardy维护的Ceaser Compass扩展仓库
• LESS mixin: Matthew Wagerfield提供的CSS3 LESS mixin
• TextMate Bundle: 同名Ceaser CSS Easing TextMate代码包
• Youtube教程: AppMobi制作的Ceaser使用视频

常见问题

Q1：Ceaser生成的cubic-bezier代码能直接用在所有浏览器吗？

A1：官网指出现代浏览器已支持CSS transitions，但-ms-前缀从未真正需要，WebKit/Safari/Chrome的Bug 45761导致easeBack效果暂不可用，建议关注该bug修复进展。

Q2：Ceaser内置了哪些Penner缓动方程？

A2：包含easeInQuad、easeInCubic、easeInQuart、easeInQuint、easeInSine、easeInExpo、easeInCirc、easeInBack及其easeOut和easeInOut变体，共24个Penner方程，加上默认5个基础缓动和自定义模式。

更多同类工具与网站,可在在线编程分类继续挑选。

信息核实于 2026年7月,具体以官网为准。