CSS动画生成器
使用16个预设创建CSS动画。自定义持续时间、时序并获取可用代码。
动画属性
CSS 代码
CSS动画生成器
使用我们的可视化构建器即时生成CSS动画。包含16个内置预设。
热门工具
关于CSS动画生成器
这里有十六种现成的关键帧效果，包括弹跳、抖动、脉冲、淡入淡出、滑动、旋转、翻转、摆动、橡皮筋、果冻、心跳、闪烁和缩放，可通过滑块和菜单调节时长、延迟、播放次数、方向、缓动函数和填充模式。预览方块会随着每次改动重新播放效果。输出面板给出完整的 @keyframes 规则以及使用您自定义动画名的 animation 简写，可直接复制进样式表。
使用场景
如何使用
在顶部的预设网格中挑一种效果：Bounce、Shake、Pulse、Fade In、Slide In Left、Rotate、Flip、Swing、Jello、Heart Beat、Zoom In 等等。
看预览面板里的紫色方块反复播放该效果，然后拖动 Duration（时长）和 Delay（延迟）滑块，以秒为单位设定节奏。
把 Iteration Count（播放次数）设为 1、2、3、5 或 Infinite，Direction（方向）可选 Normal、Reverse、Alternate 或 Alternate Reverse。
设置 Timing Function（缓动函数）——Ease、Ease In、Ease Out、Ease In Out、Linear、Step Start 或 Step End——以及 Fill Mode（填充模式）：None、Forwards、Backwards 或 Both。
在 Animation Name 框里给关键帧重新命名，避免这条规则和网站上已有的 CSS 冲突。
直接取用代码面板上方的单行简写，或者点击 Copy 复制完整的 @keyframes 代码块和 .animated-element 规则。
专业提示
- 直接粘贴内容——CSS 动画生成器会自动识别常见的输入格式并套用合理的默认设置。
- 善用键盘快捷键（Ctrl/Cmd+A 全选，Ctrl/Cmd+C 复制），在 CSS 动画生成器中处理内容会更顺手。
- 输入内容特别大时建议分批处理——浏览器标签页通常能承载几 MB 的文本，但解析超大数据可能让界面短暂卡顿。
- CSS 动画生成器不会记录或保存您输入的内容。如果需要留档，请把重要结果复制到本地文件或笔记应用里。
- 把 CSS 动画生成器与站内其他工具（格式化工具、转换器、编码工具）搭配使用，不离开浏览器就能跑完整条数据处理流程。
常见问题解答
是的，完全免费：无需注册、无需 API 密钥、没有水印，也没有使用次数限制。
不会。CSS 动画生成器完全在您的浏览器本地运行，输入的内容不会经过我们的服务器。
没有硬性上限，但输入超过几 MB 后速度会明显变慢，具体取决于设备的内存。
可以。用 CSS 动画生成器得到的结果归您所有，可自由用于任何个人或商业项目。
大部分逻辑都由客户端 JavaScript 执行，因此页面首次加载后，通常没有网络也能继续使用。
没有。CSS 动画生成器在您的浏览器中运行，无需 API 密钥，也不会被限流，硬件性能允许的话可以不限次数地处理。