✦
CSS 动画生成
选择淡入/滑入/缩放/弹跳等预设,生成 CSS @keyframes 动画代码,实时预览。本地生成。
本地处理 · 不上传
加载工具中…
相关：CSS动画 · keyframes · 动画生成 · animation · 过渡效果
CSS 动画生成通过配置关键帧与时长、延迟、循环次数，实时预览动画效果并输出 @keyframes 与 animation 代码。
使用步骤
- 选择动画类型或自定义关键帧
- 调整时长、延迟与循环
- 实时预览效果
- 复制生成的 CSS
使用场景
- 为按钮与图标添加动效
- 制作加载与提示动画
- 设计元素入场退场效果
- 学习关键帧动画的写法
小贴士
- 优先动画 transform 与 opacity，这两个属性由合成器处理不触发重排；动画 width、top 之类会导致每帧重新布局，明显卡顿。
- `animation-fill-mode: forwards` 让元素停在最后一帧，否则动画结束会瞬间跳回初始状态。
- 尊重用户的减少动效偏好：用 `@media (prefers-reduced-motion: reduce)` 关掉非必要动画，这对前庭功能敏感的用户很重要。
常见问题
动画结束后为什么弹回原位？
因为默认的 fill-mode 是 none，动画结束即恢复元素本来的样式。设置 `animation-fill-mode: forwards` 可保持最后一帧的状态。
animation 和 transition 怎么选？
transition 需要状态变化触发且只有起止两态；animation 可自动播放、定义多个中间帧并循环。悬浮变色用 transition，持续旋转的加载图标用 animation。
动画卡顿怎么办？
检查动画的是哪些属性。改动几何属性会触发重排，改用 transform 的位移与缩放代替 left/top 和 width/height，通常立刻流畅。
CSS 动画生成是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 动画生成，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。