免费在线CSS动画生成器，可视化创建CSS3动画效果，支持关键帧编辑、缓动函数选择、实时预览，一键复制CSS代码。无需注册，数据绝不上传服务器。
零依赖·可离线使用🎯 预设动画
⚙️ 参数设置
👁️ 实时预览
📝 生成代码
什么是CSS动画？
CSS动画是通过CSS3的animation属性和@keyframes规则创建的网页动画效果。无需JavaScript即可实现平滑的过渡、旋转、缩放、位移等动画，性能优秀且易于维护。
CSS动画和CSS过渡有什么区别？
CSS过渡（transition）只能在两个状态之间切换，需要触发条件（如hover）。CSS动画（animation）可以定义多个关键帧，支持自动播放、循环、暂停等控制，功能更强大。
缓动函数如何选择？
ease（默认，开始慢中间快结束慢）、linear（匀速）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（两端慢）。也可使用cubic-bezier自定义曲线。自然运动推荐ease-out，机械运动推荐linear。
如何让动画无限循环？
设置animation-iteration-count为infinite即可。本工具在"重复次数"选项中选择"无限循环"即可自动设置。注意无限循环动画可能影响页面性能，建议仅在需要时使用。
CSS动画性能如何优化？
优先使用transform和opacity属性做动画（GPU加速），避免动画width/height/margin等触发重排的属性。使用will-change提示浏览器预优化。减少同时运行的动画数量。
生成的代码如何使用？
复制生成的CSS代码到你的样式表中，将动画类名添加到HTML元素上即可。@keyframes定义放在样式表顶部，animation属性放在对应选择器中。
CSS动画生成器能做什么？
CSS动画生成器是一款专为前端开发者设计的可视化工具，帮助快速创建CSS3动画效果。无需手写代码前先看效果，调整参数实时预览，满意后一键复制完整CSS代码。支持12种预设动画效果，可自定义持续时间、缓动函数、重复次数等参数，所有操作在浏览器本地完成。
核心功能
- 12种预设动画：弹跳、淡入淡出、旋转、缩放、滑动、抖动、脉冲、摇摆、翻转等
- 实时预览：参数调整即时反映到预览区域
- 完整参数控制：持续时间、缓动函数、重复次数、延迟、方向
- 一键复制：生成完整的@keyframes和animation属性代码
- 弹性缓动：内置弹性缓动曲线，创建自然弹跳效果
使用教程
1. 从预设动画中选择一个基础效果
2. 调整持续时间、缓动函数等参数
3. 在预览区域查看动画效果
4. 满意后点击"复制CSS"获取代码
应用场景
网页动效：为按钮、卡片、弹窗添加入场动画，提升用户体验。
加载动画：创建loading动画效果，替代静态等待。
交互反馈：为点击、悬停等操作添加微动画反馈。
演示文稿：为网页演示添加专业动画效果。
CSS动画知识
CSS3动画由@keyframes规则定义关键帧，通过animation属性控制播放。与JavaScript动画相比，CSS动画由浏览器渲染引擎优化，性能更好，且声明式写法更易维护。推荐优先使用transform和opacity属性做动画，这两个属性可由GPU加速，不会触发重排重绘。