<h2>工具简介</h2>
<p><strong>CSS 动画生成器</strong>是工具派推出的在线 CSS 动画制作工具：内置<strong>加载、进入、悬停、强调</strong>四大分类共 <strong>22 种</strong>常用动画预设，所有效果都用纯 CSS（<code>@keyframes</code> 关键帧动画或 <code>transition</code> 过渡）实现，<strong>无需引入任何 JavaScript 动画库</strong>。左侧调参数、中间实时预览、下方同步生成可复制的 CSS 与完整 HTML 代码——每改一个参数，预览和代码立即更新。无论是做 loading 加载图标、按钮悬停交互，还是元素入场动画，都能几分钟内产出可直接粘贴的代码。</p>
<h2>功能亮点</h2>
<ul>
<li><strong>加载动画（7 种）</strong>：旋转圆圈、跳动圆点、脉冲扩散、多层圆环、柱状波动、波浪线条、轨道运行，覆盖主流 loading 样式。</li>
<li><strong>进入动画（6 种）</strong>：淡入、左侧滑入、右侧滑入、底部弹入、缩放进入、翻转进入，用于元素首次出现时的入场效果。</li>
<li><strong>悬停动画（5 种）</strong>：悬停放大、悬停旋转、悬停发光、悬停上浮、悬停变色，基于 <code>:hover</code> + <code>transition</code>，适合按钮和卡片交互。</li>
<li><strong>强调动画（4 种）</strong>：抖动、橡皮筋、摇摆、心跳，用于吸引用户注意，如消息提醒、表单错误提示。</li>
<li><strong>实时预览 + 代码同步</strong>：非悬停类动画每次调参自动重播；悬停类按页面提示把鼠标移到预览元素上即可查看。</li>
<li><strong>一键复制</strong>：可分别复制纯 CSS 或「CSS + HTML」完整片段；类名为通用的 <code>.anim-box</code> / <code>.anim-target</code>，keyframes 名称带 <code>cssanim-</code> 唯一前缀，不易与项目现有样式冲突。</li>
</ul>
<h2>参数说明</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>作用</th>
<th>默认值 / 可选值</th>
</tr>
</thead>
<tbody><tr>
<td>颜色</td>
<td>动画主体颜色</td>
<td>取色器或十六进制色值输入，默认 <code>#3b82f6</code></td>
</tr>
<tr>
<td>大小</td>
<td>动画元素的尺寸（px）</td>
<td>默认 48；范围 16–120</td>
</tr>
<tr>
<td>时长</td>
<td>单次动画的持续时间（s）</td>
<td>默认 1；范围 0.2–3（步长 0.1）</td>
</tr>
<tr>
<td>缓动函数</td>
<td>动画的速度曲线</td>
<td>默认 ease-in-out；可选 线性 / ease / ease-in / ease-out / ease-in-out / 弹跳</td>
</tr>
<tr>
<td>延迟</td>
<td>首次播放前的等待时间（s）</td>
<td>默认 0；范围 0–2（步长 0.1）</td>
</tr>
<tr>
<td>循环次数</td>
<td>动画播放次数（悬停类无此参数）</td>
<td>默认 无限循环；可选 1 / 2 / 3 / 5 次</td>
</tr>
<tr>
<td>方向</td>
<td>动画播放方向（悬停类无此参数）</td>
<td>默认 正向；可选 反向 / 交替 / 交替反向</td>
</tr>
</tbody></table>
<h2>使用步骤</h2>
<ol>
<li><strong>选择动画分类</strong>：打开工具页，顶部有「加载动画 / 进入动画 / 悬停动画 / 强调动画」四个分类标签，默认选中「加载动画」，点击即可切换。</li>
<li><strong>挑选动画效果</strong>：在左侧「动画效果」网格中点选一种预设（如「旋转圆圈」），选中项高亮为蓝色。</li>
<li><strong>调节参数</strong>：用取色器或色值输入框设置颜色；拖动「大小」「时长」「延迟」滑杆；下拉选择缓动函数；非悬停动画还可以设置「循环次数」和「方向」。中间预览区会实时更新，非悬停动画每次调参后自动从头重播。</li>
</ol>
<p><img src="article/202607/1783965762226_4769.png" alt="CSS 动画生成器主界面：顶部为加载动画、进入动画、悬停动画、强调动画四个分类标签，左侧为动画效果预设网格与颜色、大小、"></p>
<ol start="4">
<li><strong>复制代码</strong>：预览满意后，到页面下方代码区，点「复制 CSS」只复制样式，或点「复制 HTML」复制带 <code>&lt;style&gt;</code> 标签的完整片段，按钮会弹出「已复制」提示。</li>
<li><strong>粘贴到项目</strong>：CSS 放进你的样式表，HTML 片段放进页面对应位置；悬停类动画把样式绑定到需要交互的按钮或卡片元素上即可。</li>
</ol>
<h2>使用技巧</h2>
<ul>
<li><strong>loading 用在按钮或骨架屏</strong>时把「大小」调小到 16–24px；做全屏加载遮罩时调到 80–120px 更醒目。</li>
<li><strong>想要 Q 弹手感选「弹跳」缓动</strong>（内置回弹效果的 cubic-bezier 曲线），搭配进入动画和强调动画效果最佳。</li>
<li><strong>一次性入场</strong>：「循环次数」设为 1 次，配合进入动画做只播放一次的入场效果；强调动画建议设 2–3 次，避免无限循环分散用户注意力。</li>
<li><strong>悬停类预览要动鼠标</strong>：悬停动画的参数只影响过渡时长和缓动，预览时必须把鼠标移到预览方块上才能触发效果。</li>
<li><strong>改名套用</strong>：复制出的类名是 <code>.anim-box</code> / <code>.anim-target</code>，套用到自己的元素时，把样式改名或直接合并进现有 class 即可。</li>
<li><strong>多个动画同页共存</strong>：每个预设的 keyframes 名称都带唯一后缀（如 <code>cssanim-spin-a</code>），同页放多个不同动画不会互相覆盖。</li>
</ul>
<h2>常见问题</h2>
<p><strong>Q1：为什么悬停动画在预览区不动？</strong><br>悬停类动画（悬停放大 / 旋转 / 发光 / 上浮 / 变色）基于 <code>:hover</code> 触发，需要把鼠标移到预览方块上才有效果，预览区上方也有「将鼠标悬停在元素上预览」的提示，这是正常的。</p>
<p><strong>Q2：为什么每次调参动画都会重新播放？</strong><br>非悬停动画在任意参数变化时会自动从头重播，确保你看到的始终是当前参数下的完整效果，属于工具的设计行为。</p>
<p><strong>Q3：「方向」里的交替和交替反向是什么意思？</strong><br>交替（alternate）表示偶数次循环时反向播放，动画来回摆动更自然；交替反向则是第一次就反向。该选项只在循环次数大于 1 或无限循环时有肉眼可见的区别。</p>
<p><strong>Q4：复制 CSS 和复制 HTML 有什么区别？</strong><br>「复制 CSS」只复制样式部分，适合粘贴进已有样式表；「复制 HTML」会把样式包进 <code>&lt;style&gt;</code> 标签并附上结构 HTML，可直接保存为 <code>.html</code> 文件用浏览器打开预览，适合快速验证效果。</p>
<p><strong>Q5：生成的代码需要依赖第三方库吗？</strong><br>不需要。全部为原生 CSS <code>@keyframes</code> 或 <code>transition</code>，复制到任意项目即可运行，兼容所有现代浏览器。</p>


## 工具简介

**CSS 动画生成器**是工具派推出的在线 CSS 动画制作工具：内置**加载、进入、悬停、强调**四大分类共 **22 种**常用动画预设，所有效果都用纯 CSS（`@keyframes` 关键帧动画或 `transition` 过渡）实现，**无需引入任何 JavaScript 动画库**。左侧调参数、中间实时预览、下方同步生成可复制的 CSS 与完整 HTML 代码——每改一个参数，预览和代码立即更新。无论是做 loading 加载图标、按钮悬停交互，还是元素入场动画，都能几分钟内产出可直接粘贴的代码。

## 功能亮点

- **加载动画（7 种）**：旋转圆圈、跳动圆点、脉冲扩散、多层圆环、柱状波动、波浪线条、轨道运行，覆盖主流 loading 样式。
- **进入动画（6 种）**：淡入、左侧滑入、右侧滑入、底部弹入、缩放进入、翻转进入，用于元素首次出现时的入场效果。
- **悬停动画（5 种）**：悬停放大、悬停旋转、悬停发光、悬停上浮、悬停变色，基于 `:hover` + `transition`，适合按钮和卡片交互。
- **强调动画（4 种）**：抖动、橡皮筋、摇摆、心跳，用于吸引用户注意，如消息提醒、表单错误提示。
- **实时预览 + 代码同步**：非悬停类动画每次调参自动重播；悬停类按页面提示把鼠标移到预览元素上即可查看。
- **一键复制**：可分别复制纯 CSS 或「CSS + HTML」完整片段；类名为通用的 `.anim-box` / `.anim-target`，keyframes 名称带 `cssanim-` 唯一前缀，不易与项目现有样式冲突。

## 参数说明

| 参数 | 作用 | 默认值 / 可选值 |
| --- | --- | --- |
| 颜色 | 动画主体颜色 | 取色器或十六进制色值输入，默认 `#3b82f6` |
| 大小 | 动画元素的尺寸（px） | 默认 48；范围 16–120 |
| 时长 | 单次动画的持续时间（s） | 默认 1；范围 0.2–3（步长 0.1） |
| 缓动函数 | 动画的速度曲线 | 默认 ease-in-out；可选 线性 / ease / ease-in / ease-out / ease-in-out / 弹跳 |
| 延迟 | 首次播放前的等待时间（s） | 默认 0；范围 0–2（步长 0.1） |
| 循环次数 | 动画播放次数（悬停类无此参数） | 默认 无限循环；可选 1 / 2 / 3 / 5 次 |
| 方向 | 动画播放方向（悬停类无此参数） | 默认 正向；可选 反向 / 交替 / 交替反向 |

## 使用步骤

1. **选择动画分类**：打开工具页，顶部有「加载动画 / 进入动画 / 悬停动画 / 强调动画」四个分类标签，默认选中「加载动画」，点击即可切换。
2. **挑选动画效果**：在左侧「动画效果」网格中点选一种预设（如「旋转圆圈」），选中项高亮为蓝色。
3. **调节参数**：用取色器或色值输入框设置颜色；拖动「大小」「时长」「延迟」滑杆；下拉选择缓动函数；非悬停动画还可以设置「循环次数」和「方向」。中间预览区会实时更新，非悬停动画每次调参后自动从头重播。

![CSS 动画生成器主界面：顶部为加载动画、进入动画、悬停动画、强调动画四个分类标签，左侧为动画效果预设网格与颜色、大小、](article/202607/1783965762226_4769.png)

4. **复制代码**：预览满意后，到页面下方代码区，点「复制 CSS」只复制样式，或点「复制 HTML」复制带 `<style>` 标签的完整片段，按钮会弹出「已复制」提示。
5. **粘贴到项目**：CSS 放进你的样式表，HTML 片段放进页面对应位置；悬停类动画把样式绑定到需要交互的按钮或卡片元素上即可。

## 使用技巧

- **loading 用在按钮或骨架屏**时把「大小」调小到 16–24px；做全屏加载遮罩时调到 80–120px 更醒目。
- **想要 Q 弹手感选「弹跳」缓动**（内置回弹效果的 cubic-bezier 曲线），搭配进入动画和强调动画效果最佳。
- **一次性入场**：「循环次数」设为 1 次，配合进入动画做只播放一次的入场效果；强调动画建议设 2–3 次，避免无限循环分散用户注意力。
- **悬停类预览要动鼠标**：悬停动画的参数只影响过渡时长和缓动，预览时必须把鼠标移到预览方块上才能触发效果。
- **改名套用**：复制出的类名是 `.anim-box` / `.anim-target`，套用到自己的元素时，把样式改名或直接合并进现有 class 即可。
- **多个动画同页共存**：每个预设的 keyframes 名称都带唯一后缀（如 `cssanim-spin-a`），同页放多个不同动画不会互相覆盖。

## 常见问题

**Q1：为什么悬停动画在预览区不动？**
悬停类动画（悬停放大 / 旋转 / 发光 / 上浮 / 变色）基于 `:hover` 触发，需要把鼠标移到预览方块上才有效果，预览区上方也有「将鼠标悬停在元素上预览」的提示，这是正常的。

**Q2：为什么每次调参动画都会重新播放？**
非悬停动画在任意参数变化时会自动从头重播，确保你看到的始终是当前参数下的完整效果，属于工具的设计行为。

**Q3：「方向」里的交替和交替反向是什么意思？**
交替（alternate）表示偶数次循环时反向播放，动画来回摆动更自然；交替反向则是第一次就反向。该选项只在循环次数大于 1 或无限循环时有肉眼可见的区别。

**Q4：复制 CSS 和复制 HTML 有什么区别？**
「复制 CSS」只复制样式部分，适合粘贴进已有样式表；「复制 HTML」会把样式包进 `<style>` 标签并附上结构 HTML，可直接保存为 `.html` 文件用浏览器打开预览，适合快速验证效果。

**Q5：生成的代码需要依赖第三方库吗？**
不需要。全部为原生 CSS `@keyframes` 或 `transition`，复制到任意项目即可运行，兼容所有现代浏览器。


免费在线 CSS 动画生成器，提供加载、进入、悬停、强调四大分类共 22 种预设动画，支持调节颜色、大小、时长、缓动函数、延迟、循环次数和方向，实时预览，一键复制纯 CSS 或完整 HTML 代码，无需任何依赖库。

CSS 动画生成器教程：22 种预设动画，实时预览一键复制代码