免费在线CSS动画生成器，支持bounce/fade/slide/rotate/zoom等12种动画预设，参数可调，实时预览，一键复制CSS代码。无需注册，数据绝不上传服务器。
零依赖·可离线使用🎭 选择动画类型
⚙️ 参数调整
👁️ 实时预览
📋 CSS代码
❓ 常见问题
支持哪些动画类型？
12种：bounce、fade-in、fade-out、slide-left/right/up/down、rotate、zoom-in/out、shake、pulse。
可以自定义参数吗？
可以。支持持续时间、延迟、重复次数、缓动函数、方向等参数。
代码可以直接用吗？
可以。包含@keyframes和animation属性，复制后直接粘贴到CSS文件。
缓动函数怎么选？
ease适合大多数场景，linear适合匀速运动，弹性适合弹跳效果。
数据会上传到服务器吗？
不会。所有动画生成和预览在浏览器本地完成。
支持自定义关键帧吗？
当前版本支持预设动画参数调整，自定义关键帧后续扩展。
CSS动画生成器能做什么？
CSS动画生成器是一款免费在线设计工具，提供12种常用CSS动画预设（bounce、fade、slide、rotate、zoom、shake、pulse等），支持持续时间、延迟、重复次数、缓动函数等参数调整，实时预览动画效果，一键复制@keyframes和animation CSS代码。适用于网页动效设计、UI交互开发、学习CSS动画等场景。所有处理在浏览器本地完成。
核心功能
- 12种预设：bounce/fade-in/fade-out/slide/rotate/zoom/shake/pulse等
- 参数可调：持续时间、延迟、重复、缓动、方向
- 实时预览：调整参数即时看到效果
- 完整代码：@keyframes + animation属性
- 一键复制：复制后直接粘贴到项目
使用教程
1. 点击选择一种动画类型。
2. 调整参数（持续时间、缓动函数等）。
3. 点击"播放"预览动画效果。
4. 点击"复制CSS"获取代码，粘贴到项目中使用。
应用场景
场景1：网页动效
为按钮、卡片、弹窗添加入场动画，提升用户体验。
场景2：UI交互
为加载状态、提示信息、表单验证添加反馈动画。
场景3：学习CSS动画
直观理解@keyframes和animation属性，快速上手CSS动画。
扩展知识
CSS动画通过@keyframes定义关键帧，animation属性控制播放。缓动函数决定动画速度曲线：ease慢-快-慢，linear匀速，ease-in慢启动，ease-out慢结束。cubic-bezier可自定义曲线。animation-fill-mode控制动画前后样式：forwards保持结束状态，backwards应用起始状态。will-change属性可提示浏览器优化渲染性能。