CSS 关键帧动画生成器
从弹跳、旋转、脉冲、抖动或淡入开始，再编辑关键帧。点击播放才启动预览；CSS 使用相同关键帧数值和分段缓动。
关键帧
支持 2–20 个不重复位置，必须含 0% 和 100%。变换顺序为位移 → 旋转 → 缩放。输出按位置排序。
点击播放后才开始预览，可随时停止。只作用于示例图形。
使用步骤
如何使用
- 选择预设或编辑 2–20 个不重复关键帧，包含 0% 和 100%。
- 设置时长、延迟、缓动、循环次数、方向和填充模式，播放或暂停预览。
- 复制或下载 CSS，将 animated-element 类用于自己的元素。
可编辑关键帧
每帧包含位置、水平/垂直位移、旋转、缩放和透明度。输出按位置排序，必须含两端。位移限 ±500px、旋转 ±3600 度、缩放 0–5、透明度 0–1。这是变换/透明度编辑器，不是任意 CSS 属性或多元素时间线编辑器。
时间控制与预览
时长为 0.1–60 秒，延迟为 0–60 秒。支持 1–100 次或无限循环、五种标准缓动或自定义 cubic-bezier、四种方向和填充模式。预览使用本地 Web Animations，仅点击播放后启动，页面隐藏时停止，可暂停或停止。超出预览区域的图形可能被裁切。
纯 CSS 输出
无需上传或依赖。导出关键帧和类，不含 HTML 或完整页面。组合动画时修改两处名称，并按实际受众检查动效；导出 CSS 不会自动添加减少动态效果规则。
常见问题
你可能还想知道
能修改单个关键帧吗？
可以，在不重复位置增删或修改变换与透明度，保留 0% 和 100%。
会自动播放吗？
不会。点击播放后启动。播放中的有效编辑会重启预览；暂停或停止后编辑仍保持停止。