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