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

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/css-animation-generator-guide

## 工具简介

**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`，复制到任意项目即可运行，兼容所有现代浏览器。