# CSS 缓动与动画可视化器

可视化 CSS cubic-bezier 缓动曲线，在位置/透明度/缩放上实时预览，选择预设并导出可复制的 CSS

> 标准页面: https://elysiatools.com/zh/tools/css-easing-visualizer

- **分类:** Design

- **关键词:** 缓动, cubic-bezier, 动画, css, 曲线

## 概述

通过同时查看缓动曲线和实时预览来调校 CSS 动画时间。

输入：
- 输入自定义 cubic-bezier(x1, y1, x2, y2)，选择命名预设（linear、ease、ease-in/out、ease-in/out-back、ease-in/out-expo、snappy…），或直接输入关键字。
- 设置时长（ms）和延迟（ms）。

报告渲染：
- 缓动曲线（进度 vs 时间）为 SVG，标注两个贝塞尔控制点，以虚线线性为参照。过冲曲线（y<0 或 y>1，如 ease-out-back）会被标记，因为它们会产生弹动但可能引起布局跳动。
- 三个实时预览——translateX、opacity、scale——使用你选择的真实 CSS 缓动动画，带重放按钮。
- 可直接复制的 CSS（`transition` 与 `@keyframes` 两种形式）。

贝塞尔求解器使用牛顿-拉夫森法（含二分回退）将时间映射到进度，与浏览器一致。

## 输入项

- **缓动输入** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear
- **预设** (select)
- **时长 (ms)** (number)
- **延迟 (ms)** (number)

## 适用场景

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

## 工作原理

- 输入自定义的 cubic-bezier 坐标值，或者从下拉菜单中选择内置的缓动预设（如 ease-out-back 或 snappy）。
- 设置动画的时长（duration）和延迟时间（delay），系统将通过牛顿-拉夫森法精确计算时间与进度的映射关系。
- 实时查看 SVG 缓动曲线图表，并在 translateX、opacity 和 scale 三个维度上预览动画效果。
- 一键复制自动生成的 CSS transition 或 @keyframes 代码，直接应用到前端项目中。

## 使用案例

- 调试网页按钮悬停或弹窗弹出时的回弹（Bounce）动画效果。
- 优化页面淡入淡出及缩放过渡的平滑度。
- 为前端开发人员提供快速生成和复制 CSS 动画代码的工具。

## 常见问题

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

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

### 什么是过冲曲线（Overshooting）？

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

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

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

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

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

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

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

## 相关工具

- [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。
- [CMYK 颜色转换器](https://elysiatools.com/zh/tools/cmyk-converter): 在 HEX、RGB、HSL 和 CMYK 之间统一转换颜色。
- [OKLCH 色彩转换器](https://elysiatools.com/zh/tools/oklch-color-converter): 使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议
- [CSS 动画生成器](https://elysiatools.com/zh/tools/animation-generator): 生成 CSS 动画关键帧和属性
- [图片 URL 配色提取器](https://elysiatools.com/zh/tools/color-palette-extractor-from-image-url): 抓取远程图片 URL，提取主色调，导出可直接用于代码的配色文件，并查看对比度结果
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [玻璃拟态 / 新拟态 CSS 片段生成器](https://elysiatools.com/zh/tools/glassmorphism-css-snippet-builder): 端到端生成磨砂玻璃（glassmorphism）或新拟态（neumorphism）的完整 CSS 片段：调节模糊、饱和度、色调不透明度、圆角、边框、外阴影与顶部高光；可选 SVG feTurbulence 颗粒噪点叠加与 @supports 不支持降级；自动附带 -webkit-backdrop-filter 前缀（Safari 18 以下必需）与 Tailwind 类映射（含 v3/v4 差异提示），并在渐变背景上实时预览成品卡片。
- [图片配色提取器](https://elysiatools.com/zh/tools/image-color-palette-extractor): 上传图片后提取主色调，导出代码可用的色板片段，并检查对比度

## 示例

- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [Milligram CSS 框架示例](https://elysiatools.com/zh/samples/milligram): Milligram CSS框架示例，包括排版、表单、网格和组件
- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换

## 相关内容

- [CSS 编写、布局与层叠工作流](https://elysiatools.com/zh/hubs/css-authoring-layout-and-cascade-workflows): 通过可读格式化、选择器诊断、响应式片段和视觉状态检查来编写与审查 CSS。