CSS 缓动编辑器

前端开发者、CSS动画爱好者需要精细控制动画速度曲线时，Easing Wizard提供零配置的在线调试环境，支持贝塞尔、弹簧、反弹等7种缓动类型，并直接输出CSS代码、Tailwind CSS代码及REST API。

核心功能：7种缓动类型 + 实时预览

官网首页明确列出Bézier、Spring、Bounce、Wiggle、Overshoot、Basis、Jump七种缓动曲线，每种可独立调节参数。贝塞尔模式下支持X1/Y1/X2/Y2四个控制点拖拽；弹簧模式可调节刚度与阻尼；反弹模式可调整弹跳次数与强度。

• 预览面板：同时展示Linear对比曲线，支持循环播放与单次播放
• 变换属性：可单独预览Move X/Y、Width、Height、Scale、Rotate、Opacity、Rotate X/Rotate Y共9种动画属性
• 形状切换：预览图形支持圆形与方形两种

代码输出与集成方式

生成的缓动曲线可直接复制为CSS代码（cubic-bezier格式）或Tailwind CSS类名。官网还提供REST API接口，支持从后端或构建步骤直接调用生成JSON、纯CSS或SVG格式的曲线数据；MCP Server让Claude、Cursor、VS Code等AI编辑器在聊天中直接调用曲线生成；另有Claude Code Plugin可在编辑器内推荐、改进和审计缓动曲线。

• REST API：返回JSON/纯CSS/SVG三种格式，适合自动化工作流
• MCP Server：通过npm安装，AI工具可直接调用
• Claude Code Plugin：安装后可在编辑器中直接使用缓动推荐与审计功能
• 分享功能：一键复制当前缓动配置的分享链接

作者与社区

由开发者Matthias Martin独立制作，在Bluesky和X上均有官方账号。项目开源，GitHub仓库可查阅源码。第三方评测网站thosefree.com于2024年12月发布使用教程，强调其“所见即所得”的调试体验。

• 作者：Matthias Martin
• 社交账号：Bluesky与X均以@EasingWizard为用户名
• 开源仓库：GitHub上可找到项目代码

常见问题

Q1：Easing Wizard生成的cubic-bezier代码怎么用在CSS里？

A1：复制代码后，填入transition-timing-function或animation-timing-function属性即可。例如 transition: opacity 1s cubic-bezier(0.36, 0, 0.66, -0.56); 。官网也提供了Tailwind CSS格式的复制选项。

Q2：Easing Wizard的MCP Server怎么安装？

A2：通过npm全局安装：npm install -g easing-wizard-mcp-server。安装后可在Claude、Cursor、VS Code等支持MCP协议的编辑器中使用，直接在聊天窗口输入曲线参数即可生成缓动函数。

Q3：Easing Wizard支持哪些缓动曲线类型？

A3：支持7种：Bézier（贝塞尔）、Spring（弹簧）、Bounce（反弹）、Wiggle（摆动）、Overshoot（过冲）、Basis（基础）、Jump（跳跃）。每种都有独立的参数调节面板。

更多同类工具与网站,可在动画库分类继续挑选。

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