CSS动画生成器
在线生成CSS动画关键帧代码，支持淡入淡出、滑入、弹跳、旋转、缩放、抖动、脉冲、翻转8种动画，实时预览并一键复制CSS。
免费在线工具
Loading…
使用说明
选择动画类型、设置时长和循环次数，页面中的方块会自动播放动画预览。
动画类型：支持淡入淡出(fade)、滑入(slide)、弹跳(bounce)、旋转(rotate)、缩放(scale)、抖动(shake)、脉冲(pulse)、翻转(flip)共8种。
参数设置：可调节动画时长（0.1秒起）、循环次数（1-3次或无限循环）和缓动函数（ease/linear/ease-in/ease-out/ease-in-out）。
调整参数后预览区域会实时更新动画效果，底部自动生成对应的CSS @keyframes代码。点击「复制CSS」按钮可将代码复制到剪贴板。
功能介绍
- 8种动画类型：淡入淡出、滑入、弹跳、旋转、缩放、抖动、脉冲、翻转
- 参数可调：时长、循环次数、缓动函数自由组合
- 实时预览：调整参数即刻观看动画效果
- 代码生成：自动输出标准CSS @keyframes代码
- 一键复制：点击按钮即可将生成的CSS代码复制到剪贴板
使用场景
网页开发
前端开发者快速生成CSS动画关键帧代码，无需手动编写
原型设计
设计师在原型阶段快速测试不同动画效果
学习CSS
CSS初学者通过预览直观理解不同动画属性的效果
演示制作
在演示页面中添加简单的CSS动画提升视觉效果
常见问题
生成的CSS代码兼容哪些浏览器？
生成的CSS使用了标准的@keyframes和animation属性，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。
可以自定义更复杂的动画吗？
本工具提供8种常用动画模板。如需更复杂的组合动画，建议将生成的代码作为基础，手动修改@keyframes中的关键帧。
动画时长有上限吗？
时长可设置为0.1秒到任意值，但建议动画时长控制在0.3s-3s之间以获得最佳视觉效果。
如何将动画应用到我的元素上？
将生成的@keyframes代码添加到CSS文件中，然后为目标元素添加animation属性即可，页面底部生成的示例代码可直接参考使用。