选择动画预设并调整时长、缓动和方向，实时预览效果并复制 CSS 关键帧。
如何高效使用 CSS 动画生成器？
先选择动画类型（如弹跳、淡入、滑动），再调整持续时间和延迟，控制动画节奏。设置循环次数与播放方向，可快速得到一次播放或往返效果。缓动函数决定运动曲线，轻微调整即可改变动画的“质感”。预览区支持暂停与重播，便于反复对比细节。确认效果后复制生成的 CSS 代码即可使用。若在组件库中使用，建议将 keyframes 单独保存为可复用的动画名，保持不同模块一致的动效风格。
为什么使用在线关键帧生成器？
手写 @keyframes 容易出错且难以快速预览。在线工具提供可视化控制，让你在几秒内完成试错与确认，尤其适合快速原型和 UI 调整。无需安装插件，浏览器即可使用，适合设计师与前端协作时同步修改。所有操作在本地完成，不上传代码，更安全。对于经常需要微调动效的项目，在线生成器能显著提升效率。
功能亮点
- 多种动画预设可快速启动。
- 时长、延迟、循环与方向可调。
- 缓动函数控制动画节奏。
- 实时预览支持暂停与重播。
- 一键复制可用的 CSS 代码。
- 本地运行不上传。
动画使用建议与性能优化
优先使用 transform 与 opacity 来动画，能获得更好的性能与流畅度。UI 反馈建议控制在 150-300ms，避免过长影响交互。若是加载或提示动画，可适当延长但避免无限循环造成干扰。对移动端和低性能设备应测试动画是否卡顿。若用户偏好减少动画，应提供降动效方案。良好的动画应引导注意力，而不是分散注意力。
FAQ
Q: animation 和 transition 有什么区别？
A: transition 适用于状态变化（如 hover），animation 用于多关键帧的自动播放序列。简单过渡用 transition，复杂动效用 animation。
Q: fill-mode 有什么作用？
A: fill-mode 决定动画开始前或结束后的样式保留方式，例如 forwards 会保留最后一帧。
Q: 动画会影响性能吗？
A: 过多或不当动画可能影响性能。尽量使用 transform/opacity，并控制动画数量与持续时间。