Easing Wizard

我们前端大部分都是用一些流行的 css 动画库如 animate.css / animate.js 等，基本大部分情况都能满足我们的需求。当然，总有各种各样的特殊情况或特殊需求需要自己定制一个稍微精细一点的动画。

那么，有没有什么工具可以将 CSS 动画的一些参数可视化编辑后就能实时展示出来，并且还能生成代码呢？

答案是：Easing Wizard。

Easing Wizard是什么？

Easing Wizard是一款在线的CSS动画生成器，它最大的亮点就是可以进行线上可视化编辑，包括各种缓动效果（贝塞尔曲线、弹跳、弹簧、摆动）都可以在线进行查看效果，甚至还可以导出 CSS 动画代码。并且集成了 Tailwind CSS，方便前端工程师和设计师快速实现自然过渡交互效果。

主要功能亮点

• 缓动类型丰富：支持多种缓动曲线，包括贝塞尔曲线、弹跳（bounce）、弹簧（spring）、摆动（swing）、过冲（overshoot）等动画缓动和效果展示。
• 实时预览动画效果：拖拽控制点即可可视化调整动画速度与变化曲线，即时预览效果变化。
• 自动生成 CSS 代码：点击即可复制 cubic-bezier(…) 或其他缓动函数代码，用于 transition-timing-function 或 animation-timing-function 属性中。
• 自定义参数：自定义顶部/底部空间、起止点控件等参数设置，更符合我们所需。
• 支持 Tailwind CSS：部分预设也可用于 Tailwind 生态，方便集成至现代前端项目。

适用群体

• 前端开发者：快速生成动效代码，优化用户体验。
• UI/UX 设计师：调整动画节奏，提升视觉交互感。
• 动效创作者：打造个性化动画曲线，丰富表现力。
• 教学与学习者：学习 CSS 缓动原理，辅助教学演示。 

如何使用 Easing Wizard？

使用 Easing Wizard 非常简单，只需以下几个步骤：