CSS 关键帧动画生成器
从预设动画（弹跳、抖动、脉冲、淡入、滑入、旋转、摇摆、橡皮筋、闪烁、晃动）生成 CSS @keyframes 动画，配置持续时间、缓动、延迟、迭代次数和方向 — 复制关键帧和动画简写来应用它。
输入
一个完整动画周期的长度，以秒为单位。
动画开始前的等待时间。
A positive whole number, or "infinite" to loop forever.
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"duration": "1",
"timingFunction": "ease-in-out",
"delay": "0",
"iterationCount": "1",
"direction": "normal"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 关键帧动画生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS 关键帧动画定义了元素样式在动画周期中如何变化，使用 @keyframes at 规则描述一系列步骤（0% 到 100%），并使用 animation 简写属性将这些步骤应用到具有持续时间、缓动、延迟、重复次数和方向的元素。关键帧动画使按钮能够脉冲、卡片淡入或通知图标抖动 — 全部无需 JavaScript，并在浏览器的合成器线程上运行以实现平滑高效的动作。
此生成器为您创建两个部分：具有所选预设的正确百分比停止点和属性的 @keyframes 块，以及应用它的相应 .animated-element { animation: ...; } 规则。将两者复制到样式表中，并将 .animated-element 替换为您自己的选择器。
使用方法
- 选择预设 — 弹跳、抖动、脉冲、淡入、左滑入、旋转、摇摆、橡皮筋、闪烁或晃动。每个预设都是现成的
transform/opacity步骤序列，基于 Animate.css 等动画库推广的众所周知的效果。 - 设置持续时间 — 以秒为单位，一个完整周期需要多长时间。
- 选择时序函数 —
ease、ease-in、ease-out、ease-in-out或linear— 以控制加速曲线。 - 设置延迟 — 以秒为单位，如果您希望动画在开始前等待。
- 设置迭代次数 — 正整数如
1或3，或infinite以永久循环。 - 选择方向 —
normal在每个周期中向前播放，reverse向后播放，alternate在每个其他周期中翻转方向，alternate-reverse从反向开始并翻转。 - 复制生成的 CSS 并将其粘贴到样式表中，或下载为
.css文件。
常见问题
为什么选择器是 .animated-element？
这是一个占位符，使 CSS 可以直接粘贴 — 将其重命名以匹配您想要动画的元素（类、ID 或任何选择器）。
我可以在任何 HTML 元素中使用这些预设吗？
是的。@keyframes 动画通过 animation 属性应用于任何元素；某些预设（如左滑入）在具有定义尺寸的块级元素上看起来最佳。
iteration-count: infinite 和数字有什么区别？
数字会播放该次数的动画，然后在最后一帧停止（除非 animation-fill-mode 另有说明）。infinite 永久重复 — 对于加载器和旋转器（如旋转预设）很有用。
这些动画会影响页面性能吗？
在现代浏览器中，动画化 transform 和 opacity（此处每个预设都使用）由 GPU 加速，是平滑 CSS 动画的推荐方法 — 比动画化 width、top 或 margin 等布局属性更便宜。
我可以在一个元素上组合多个预设吗？
不能直接在此工具中，但一旦您有两个生成的块，就可以手动列出多个以逗号分隔的 animation 简写值，只要它们的 @keyframes 名称不冲突。
隐私
一切都在您的浏览器中本地运行 — 您的设置永远不会离开您的设备，并且没有 CSS 被发送到服务器生成。