Elysia Tools
导航
Design
可视化 CSS cubic-bezier 缓动曲线，在位置/透明度/缩放上实时预览，选择预设并导出可复制的 CSS
详情
通过同时查看缓动曲线和实时预览来调校 CSS 动画时间。
输入：
报告渲染：
transition 与 @keyframes 两种形式）。贝塞尔求解器使用牛顿-拉夫森法（含二分回退）将时间映射到进度，与浏览器一致。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 缓动与动画可视化器是一个专为前端开发者与设计师打造的在线调试工具，支持输入自定义 cubic-bezier 参数或选择预设，实时渲染 SVG 缓动曲线，并在位置、透明度和缩放上提供动画预览，同时生成可直接复制的 CSS transition 和 keyframes 代码。
背景
需要在用户点击按钮时弹出一个卡片，要求卡片带有轻微的放大回弹效果，以增强交互的生动感。
问题
手写 cubic-bezier 参数很难精准控制回弹的幅度和速度，且无法直观看到缩放动画的实际表现。
如何使用
选择 ease-out-back 预设，将时长设为 600ms，在 scale 预览区域观察卡片缩放的弹动幅度并微调参数。
{
"easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
"preset": "ease-out-back",
"duration": 600,
"delay": 0
}结果
成功调校出满意的回弹曲线，并直接复制生成的 CSS transition 代码应用到弹窗样式中。
背景
正在设计一个从屏幕右侧滑出的侧边导航栏，默认的 ease-out 显得有些生硬，需要更具科技感的快速滑出效果。
问题
需要一种“前快后慢”的 snappy 缓动曲线，并需要实时对比位移（translateX）的动画节奏。
如何使用
在缓动输入框中输入自定义的 cubic-bezier 参数或选择 snappy 预设，观察 translateX 实时预览的滑出速度。
{
"easing": "cubic-bezier(0.19, 1, 0.22, 1)",
"preset": "snappy",
"duration": 800,
"delay": 0
}结果
获得了极具动感的滑出效果，并导出了对应的 @keyframes 代码用于实现侧边栏动画。
支持 linear、ease、ease-in/out、ease-out-back、snappy 等多种常用及带回弹效果的预设。
当贝塞尔曲线的 y 值小于 0 或大于 1 时（如 ease-out-back），动画会产生超出边界的弹动效果。
提供可以直接复制的 CSS transition 属性和 @keyframes 关键帧动画两种格式。
是的，提供 translateX（位移）、opacity（透明度）和 scale（缩放）三种效果的实时动画预览，并支持手动重放。
采用与浏览器一致的牛顿-拉夫森法（含二分法回退）将时间精确映射到动画进度。