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

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 中。

💫

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

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

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用CSS 动画生成器

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

常见问题

为什么某个关键帧没勾选的属性也会变化？: 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 中。