ToolPro
CSS 动画生成器
在线可视化 CSS 动画生成器：内置 20+ 经典动画（淡入淡出、滑动、缩放、弹跳、旋转等），时长/延迟/循环/缓动一键调节，支持关键帧微调，实时预览并生成可复制的 @keyframes 代码。
Workspace
CSS 动画生成器
告别手写 @keyframes。内置 20+ 经典动画（淡入淡出、滑动、缩放、弹跳、旋转、抖动…）， 时长 / 延迟 / 循环 / 方向 / 缓动曲线全部可视化调节，实时预览每一帧效果， 满意后一键复制纯净 CSS 代码，直接粘贴进项目。
纯本地生成 · 支持关键帧微调 · 动画/缓动双预设
动画库
动画参数
时长 duration
1.2s
延迟 delay
0s
循环次数
方向
填充模式 fill-mode
缓动函数 easing
代码输出
实时预览
CSS 动画
点击动画元素可重播，舞台右侧按钮可切换深/浅色背景。
关键帧微调
直接编辑下方关键帧（无需写 @keyframes 名称 外壳），点"应用修改"后立即生效。
小贴士
· animation 简写顺序为 name duration easing delay iteration direction fill-mode。
· 需要"入场后停在终点"效果时，选 填充模式 = both；需要循环动画（如旋转 loading），选 循环 = 无限。
· 缓动函数支持 cubic-bezier 贝塞尔曲线预设（back 回弹 / bounce 弹跳 / elastic 橡皮筋），超出常规区间的曲线能产生回弹效果。
工具介绍
CSS 动画生成器 是前端开发者告别手写 @keyframes 的提效神器。内置 20+ 个经典动画效果，所有参数（时长、延迟、循环次数、方向、填充模式、缓动曲线）可视化调节，实时预览每一帧效果，代码同步生成。
核心功能
1. 动画库
内置淡入淡出、上下左右滑入、缩放、旋转、弹跳、心跳、果冻、翻转进入等 24 种经典动画，点击即切换，一键预览效果。
2. 参数调节
- 时长 / 延迟：滑块精确控制，实时生效。
- 循环次数：1 / 2 / 3 次或无限循环（适合 loading 动画）。
- 方向：正常、反向、往返、往返反向。
- 填充模式：none / forwards（停在终点）/ backwards / both——入场动画选 both 效果最佳。
- 缓动函数：内置 linear、ease、ease-in/out/in-out，以及 cubic-bezier 回弹预设（in-back、out-back、双回弹、弹跳结束、橡皮筋）。
3. 关键帧微调
任何动画都可以直接编辑关键帧文本（无需 @keyframes 外壳），点「应用修改」立即生效；不满意可一键恢复默认。
4. 代码输出
CSS 与 HTML 双视图，代码随参数实时更新，一键复制即可粘贴进项目。
[!TIP]
animation 简写顺序：name duration easing delay iteration direction fill-mode。所有计算均在浏览器本地完成，零依赖、零上传。
信息
- 发布日期
- 2026-08-09
- 最近更新
- 2026-09-24
- 状态
- Normal