# CSS 动画生成器 - @keyframes 关键帧、缓动曲线、Tailwind

> 可视化制作 CSS @keyframes 动画：18 个预设、时间轴编辑关键帧、贝塞尔曲线与 steps() 缓动、时长循环方向等参数，实时预览，一键复制 CSS 或 Tailwind 配置。

- 网址: https://qilingtools.com/zh/css-animation
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

写 CSS 动画时，最麻烦的是反复调关键帧百分比、transform 组合和缓动函数，再刷新页面看效果。这个工具把这些都变成可视化操作：先从淡入、上浮淡入、左侧滑入、放大、弹跳、脉冲、抖动、3D 翻转、旋转、心跳、打字机、摇摆、橡皮筋、漂浮、变色、模糊渐显、闪烁、钟摆等预设开始，再在时间轴上点击添加关键帧、拖动调整位置。每个关键帧可以设置平移、旋转、3D 翻转、倾斜、缩放、不透明度、背景色、文字颜色、模糊、亮度和右侧裁切（用来做打字机效果），没设置的属性由浏览器在前后关键帧之间插值；同一动画里的 transform 会自动补齐成相同的函数列表，保证逐项插值而不是矩阵插值。缓动支持关键字、常用缓动曲线（easeOutBack 等）、可拖动控制点的 cubic-bezier 编辑器以及 steps()，每一段关键帧还能单独设置缓动。时长、延迟、次数（含无限循环）、方向和填充模式都可调。预览可选方块、文字或图标，能暂停、重播，或拖动滑块查看任意时刻的状态，时间轴上有播放头。生成的 CSS 已合并相同的关键帧，并附带 prefers-reduced-motion 媒体查询；同时给出 Tailwind v3 配置、v4 @theme 写法和任意值类名。

## 使用步骤

1. 点一个预设作为起点，或者在时间轴上点击空白处添加关键帧
2. 选中关键帧勾选要变化的属性并拖动滑块，再设置缓动曲线、时长、次数、方向等参数
3. 在预览中播放或拖动查看效果，然后复制 CSS、Tailwind 配置或任意值类名

## 功能特点

- 18 个常用动画预设
- 可拖动的关键帧时间轴与播放头
- transform、opacity、颜色、filter、clip-path 等属性
- 贝塞尔曲线编辑器、常用缓动与 steps()
- 每段关键帧单独设置缓动
- 方块、文字、图标预览，可暂停与逐帧查看
- 自动合并相同关键帧并附带减少动态效果查询
- 输出 CSS、Tailwind v3、Tailwind v4 与任意值类名

## 常见问题

### 为什么某个关键帧没勾选的属性也会变化？

CSS 关键帧里没有写的属性，浏览器会用前后写了该属性的关键帧插值，这正是常用写法。另外，只要动画里用到了 transform，每个写了 transform 的关键帧都会补齐同一组函数（如 translateY 与 scale），没设的取默认值，这样浏览器能逐项平滑插值。

### steps() 的 jump-start、jump-end 有什么区别？

steps(n) 把动画分成 n 段跳变。jump-end（默认）在每段结束时跳，第一帧保持起始状态；jump-start 在每段开始时就跳；jump-none 首尾都停留，共 n−1 次跳变；jump-both 首尾都跳。打字机效果常用 steps(字数, end) 配合裁切。

### prefers-reduced-motion 是做什么的？

有前庭功能障碍或对动效敏感的用户会在系统里开启“减少动态效果”。生成的 CSS 带有 @media (prefers-reduced-motion: reduce) 把动画关闭，Tailwind 写法里也加了 motion-reduce:animate-none。如果动画承载重要信息，建议在该条件下改用淡入等温和效果。

### 在 Tailwind 里怎么用生成的动画？

Tailwind v3 把 keyframes 和 animation 放进 tailwind.config.js 的 theme.extend，然后用 animate-名称 类；v4 把 --animate-名称 和 @keyframes 写在 CSS 的 @theme 里。只想临时使用时，可以直接用任意值类名 animate-[...]，但关键帧本身仍需定义在 CSS 中。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。