CSS 缓动与动画可视化器 | 在线免费工具 | Elysia Tools

工具使用指南

详细了解工具的适用范围、支持能力及用户案例。

关键事实

分类: Design
输入类型: text, select, number
输出类型: html
案例覆盖: 4
API 可用: 是

概览

CSS 缓动与动画可视化器是一个专为前端开发者与设计师打造的在线调试工具，支持输入自定义 cubic-bezier 参数或选择预设，实时渲染 SVG 缓动曲线，并在位置、透明度和缩放上提供动画预览，同时生成可直接复制的 CSS transition 和 keyframes 代码。

适用场景

需要微调 CSS 动画的贝塞尔曲线参数以实现平滑的过渡效果时。
需要直观预览带有回弹（过冲）效果的缓动动画并检查是否会引起布局跳动时。
需要快速获取符合浏览器真实渲染特性的 CSS transition 或 @keyframes 代码时。

使用方式

1输入自定义的 cubic-bezier 坐标值，或者从下拉菜单中选择内置的缓动预设（如 ease-out-back 或 snappy）。
2设置动画的时长（duration）和延迟时间（delay），系统将通过牛顿-拉夫森法精确计算时间与进度的映射关系。
3实时查看 SVG 缓动曲线图表，并在 translateX、opacity 和 scale 三个维度上预览动画效果。
4一键复制自动生成的 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 代码用于实现侧边栏动画。

常见问题

这个工具支持哪些缓动预设？

支持 linear、ease、ease-in/out、ease-out-back、snappy 等多种常用及带回弹效果的预设。

什么是过冲曲线（Overshooting）？

当贝塞尔曲线的 y 值小于 0 或大于 1 时（如 ease-out-back），动画会产生超出边界的弹动效果。

导出的 CSS 代码格式是什么？

提供可以直接复制的 CSS transition 属性和 @keyframes 关键帧动画两种格式。

这里的动画预览是实时的吗？

是的，提供 translateX（位移）、opacity（透明度）和 scale（缩放）三种效果的实时动画预览，并支持手动重放。

贝塞尔曲线是如何求解的？

采用与浏览器一致的牛顿-拉夫森法（含二分法回退）将时间精确映射到动画进度。