关键信息
- 分类
- 设计与颜色
- 输入类型
- text, select, number
- 输出类型
- html
- 样本覆盖
- 4
- 支持 API
- Yes
概览
CSS 缓动与动画可视化器是一个专为前端开发者与设计师打造的在线调试工具，支持输入自定义 cubic-bezier 参数或选择预设，实时渲染 SVG 缓动曲线，并在位置、透明度和缩放上提供动画预览，同时生成可直接复制的 CSS transition 和 keyframes 代码。
适用场景
- •需要微调 CSS 动画的贝塞尔曲线参数以实现平滑的过渡效果时。
- •需要直观预览带有回弹（过冲）效果的缓动动画并检查是否会引起布局跳动时。
- •需要快速获取符合浏览器真实渲染特性的 CSS transition 或 @keyframes 代码时。
工作原理
- •输入自定义的 cubic-bezier 坐标值，或者从下拉菜单中选择内置的缓动预设（如 ease-out-back 或 snappy）。
- •设置动画的时长（duration）和延迟时间（delay），系统将通过牛顿-拉夫森法精确计算时间与进度的映射关系。
- •实时查看 SVG 缓动曲线图表，并在 translateX、opacity 和 scale 三个维度上预览动画效果。
- •一键复制自动生成的 CSS transition 或 @keyframes 代码，直接应用到前端项目中。
使用场景
调试网页按钮悬停或弹窗弹出时的回弹（Bounce）动画效果。
优化页面淡入淡出及缩放过渡的平滑度。
为前端开发人员提供快速生成和复制 CSS 动画代码的工具。
用户案例
1. 调试弹窗弹出的回弹效果
前端开发工程师- 背景原因
- 需要在用户点击按钮时弹出一个卡片，要求卡片带有轻微的放大回弹效果，以增强交互的生动感。
- 解决问题
- 手写 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 代码应用到弹窗样式中。
2. 优化侧边栏滑出的平滑度
交互设计师- 背景原因
- 正在设计一个从屏幕右侧滑出的侧边导航栏，默认的 ease-out 显得有些生硬，需要更具科技感的快速滑出效果。
- 解决问题
- 需要一种“前快后慢”的 snappy 缓动曲线，并需要实时对比位移（translateX）的动画节奏。
- 如何使用
- 在缓动输入框中输入自定义的 cubic-bezier 参数或选择 snappy 预设，观察 translateX 实时预览的滑出速度。
- 示例配置
-
{ "easing": "cubic-bezier(0.19, 1, 0.22, 1)", "preset": "snappy", "duration": 800, "delay": 0 } - 效果
- 获得了极具动感的滑出效果，并导出了对应的 @keyframes 代码用于实现侧边栏动画。
用 Samples 测试
design相关专题
常见问题
这个工具支持哪些缓动预设？
支持 linear、ease、ease-in/out、ease-out-back、snappy 等多种常用及带回弹效果的预设。
什么是过冲曲线（Overshooting）？
当贝塞尔曲线的 y 值小于 0 或大于 1 时（如 ease-out-back），动画会产生超出边界的弹动效果。
导出的 CSS 代码格式是什么？
提供可以直接复制的 CSS transition 属性和 @keyframes 关键帧动画两种格式。
这里的动画预览是实时的吗？
是的，提供 translateX（位移）、opacity（透明度）和 scale（缩放）三种效果的实时动画预览，并支持手动重放。
贝塞尔曲线是如何求解的？
采用与浏览器一致的牛顿-拉夫森法（含二分法回退）将时间精确映射到动画进度。