什么是 CSS 动画生成器？
CSS 动画生成器是一个可视化工具，帮助您从零开始创建 CSS @keyframes 动画，无需手写代码。无论您需要为登陆页面创建微妙的淡入效果，还是为加载屏幕创建循环旋转器，此工具都提供快速直观的工作流程。
核心功能
35+ 现成预设
浏览组织有序的动画类别 — 进入、退出、强调和循环效果。
完整属性控制
精确自定义时长、缓动、延迟、迭代、方向和填充模式。
可视化 Keyframe 编辑器
通过直观的界面在每个动画步骤调整不透明度、位置、旋转和缩放。
实时预览
通过播放/暂停/重新开始控制和可自定义的预览选项即时查看您的动画。
生产级 CSS
一键复制完整的 @keyframes 定义和 animation 简写。
GPU 加速属性
所有动画都使用优化的 CSS 属性，确保平滑、高性能的渲染。
适合谁使用？
前端开发者
UI/UX 设计师
如何使用
选择预设
首先选择一个动画类别 — 进入、退出、强调或循环。点击任何预设即可立即应用。预览将播放动画，所有属性和 keyframe 将自动更新。
调整属性
使用属性控制微调动画：
- 时长 — 动画持续时间（0.1 秒至 5 秒）
- 延迟 — 动画开始前的等待时间（0 秒至 5 秒）
- 缓动 — 动画的速度曲线（ease、linear、bounce、elastic 等）
- 迭代 — 动画重复次数（1、2、3 或 infinite）
- 方向 — 向前、向后或交替播放
- 填充模式 — 动画完成后元素是否保持最终状态
编辑 Keyframe（可选）
打开Keyframe 编辑器自定义各个动画步骤。您可以在每个 keyframe 百分比处修改 opacity、translateX、translateY、rotate 和 scale。
预览和复制
使用播放/暂停和重新开始按钮查看您的动画。更改预览形状（方形、圆形或文本）和背景颜色，以查看它在不同背景下的效果。满意后，点击复制获取完整的 CSS 代码。
功能
预设库
从 35+ 精心设计的动画预设中选择，分为四个类别，每个都针对特定用例进行了优化：
进入动画
完美用于显示内容、入门流程和吸引注意力到新元素：
- Fade In、Fade In Up/Down/Left/Right
- Scale In、Slide In
- Flip In、Bounce In
- Zoom In、Rotate In
退出动画
用于移除元素、关闭模态框和关闭通知的平滑过渡：
- Fade Out、Fade Out Up/Down
- Scale Out、Slide Out
- Zoom Out、Rotate Out
强调动画
吸引注意力到重要元素，而不改变其位置：
- Pulse、Shake、Bounce
- Wobble、Swing、Rubber Band
- Jello、Heart Beat、Flash
循环动画
用于加载状态、装饰元素和环境运动的连续动画：
- Spin、Float、Ping
- Wave、Pulse Loop、Sway
可视化 Keyframe 编辑器
时间轴编辑器让您精确控制每个动画步骤。可视化时间轴条显示每个 keyframe 的位置，您可以点击任何步骤编辑其属性：
不透明度
位置
旋转
缩放
添加 Keyframe
智能插值
高级缓动选项
超越标准 CSS 缓动函数，提供 9 个内置选项，为不同的动画风格而设计：
标准缓动函数
ease— 默认平滑加速和减速linear— 整个动画过程中速度恒定ease-in— 缓慢开始，快速结束（最适合退出）ease-out— 快速开始，缓慢结束（最适合进入）ease-in-out— 两端平滑（最适合强调）
自定义曲线
bounce— 末尾有趣的弹跳效果elastic— 类似弹簧的超调和稳定smooth— 超平滑的三次贝塞尔曲线
阶梯动画
steps — 逐帧动画，用于精灵表和离散过渡
实时预览
在进行更改时实时查看您的动画。预览系统包括全面的控制，用于在不同背景下测试您的动画：
播放控制
播放、暂停和重新开始动画以查看时序和运动。
形状选项
使用方形、圆形或文本元素进行测试，以匹配您的用例。
背景颜色
自定义预览背景以测试对比度和可见性。
干净的代码输出
生成的 CSS 包括完整的 @keyframes 定义和 animation 简写属性，可直接粘贴到您的样式表中。代码在您进行更改时实时更新，因此您看到的就是您得到的。
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.element {
animation: fadeIn 1s ease-out forwards;
}常见问题
我可以动画化哪些 CSS 属性？
生成器支持最常见的动画 CSS 属性：opacity、translateX、translateY、rotate 和 scale。这些属性在大多数浏览器中都经过 GPU 加速，确保平滑性能。
某些预设还使用高级变换，如 scaleX、scaleY、skewX、skewY 和 rotateX，以实现更复杂的效果。
"填充模式"有什么作用？
填充模式控制动画播放前后发生的情况：
none— 动画后元素返回其原始状态forwards— 元素保持最后一个 keyframe 的样式backwards— 元素在延迟期间应用第一个 keyframe 的样式both— 结合 forwards 和 backwards 行为
forwards 通常是最佳选择，这样元素在淡入后保持可见。我应该使用哪个缓动函数？
以下是基于动画类型的一些指南：
| 缓动函数 | 最适合 | 行为 |
|---|---|---|
ease-out |
进入动画 | 快速开始，温和结束 |
ease-in |
退出动画 | 温和开始，快速结束 |
ease-in-out |
强调和循环 | 两端平滑 |
linear |
连续旋转 | 恒定速度 |
bounce/elastic |
有趣的效果 | 引人注目的超调 |
我可以从头开始创建自己的动画吗？
可以。选择任何预设作为起点，然后打开Keyframe 编辑器修改或添加 keyframe。您可以在每个 keyframe 步骤更改每个属性，并通过点击添加 Keyframe添加新步骤。
值会自动插值以实现平滑过渡，因此您可以专注于动画的关键时刻，而无需手动计算中间值。
生成的 CSS 是否与所有浏览器兼容？
生成的 CSS 使用标准 @keyframes 和 animation 属性，在所有现代浏览器中都受支持：
不需要供应商前缀用于当前浏览器版本。动画将在所有平台上一致工作。
还没有评论，快来发表第一条！