Developer Design Utility
CSS Animation 生成器
可以通过实时预览调整 Fade、Slide、Scale、Bounce、Pulse 等 CSS 动画，并立即生成 @keyframes 和 animation 代码。
Animation 代码生成
组合 duration、delay、easing、重复次数和方向，生成 CSS animation 代码。
实时预览
可以在 Preview Card 中立即查看所选动画效果。
@keyframes 输出
同时生成类代码、keyframes 以及 prefers-reduced-motion 无障碍适配代码。
Animation Type
Fade In
Duration
1s
Easing
ease
Iteration
1
Animation 设置
调整动画类型、速度、重复方式和运动强度，创建适合 UI 的动效。
选择默认要生成的 @keyframes 类型。
用于 CSS @keyframes 名称和类的 animation 值。
0.2s
1s
5s
0s
0s
3s
选择运动的加速和减速曲线。
无限循环建议仅用于加载状态、强调徽章或装饰元素。
选择正向、反向、交替或反向交替播放方式。
10
40
120
Live Preview
CSS Animation
Preview Card
设置的动画会实时应用在这里。
Type
Fade In
Duration
1s
Iteration
1
推荐预设
适用于卡片进入、按钮强调、加载装饰和通知效果的常用动画组合。
基础进入效果
强调 / 交互
装饰 / 循环动画
生成结果
将下面的代码粘贴到 CSS 文件中，并把类应用到目标元素。
请选择设置后点击生成 CSS 代码按钮。
帮助
什么时候使用 CSS Animation 生成器？
当你想为按钮、卡片、弹窗、提示框或落地页区块添加动效时可以使用它。你可以先预览动画效果，然后立即复制 @keyframes 和 animation 属性。
animation 属性的主要组成
- animation-name：要执行的 @keyframes 名称
- animation-duration：动画执行一次所需的时间
- animation-timing-function：运动的加速曲线
- animation-delay：动画开始前的等待时间
- animation-iteration-count：动画重复次数
- animation-direction：正向、反向或交替播放方式
推荐使用方式
- 普通卡片进入效果：0.5 秒 ~ 0.9 秒
- 按钮 hover 强调效果：0.2 秒 ~ 0.4 秒
- 弹窗进入效果：0.3 秒 ~ 0.6 秒
- 无限循环效果：仅建议用于加载、强调徽章或装饰元素
性能提示
从浏览器性能角度来看，建议优先使用 transform 和 opacity 动画，而不是 width、height、top、left。此生成器主要生成基于 transform 和 opacity 的 keyframes。
可以大量使用无限循环动画吗？
无限循环动画会持续吸引用户注意，也可能影响性能。建议仅在加载状态、强调徽章或装饰元素等目的明确的场景中使用。
如何制作自然的进入动画？
Fade 与 Slide 组合通常最自然。推荐 duration 设置为 0.6 秒~0.9 秒，easing 使用 ease-out 或 smooth cubic-bezier。
为什么需要 prefers-reduced-motion？
部分用户可能对动态效果比较敏感。添加 prefers-reduced-motion 适配代码后，可以根据用户的无障碍设置减少动画。