适用人群
- 添加简短动效的前端开发者
- 比较动画节奏的设计师
Developer Design Utility
CSS动画生成器
可以通过实时预览调整 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动画
预览8种动画并生成关键帧和animation声明。可调整时间、重复次数、方向和距离，同时保留减少动态效果的替代规则。
使用场景
- 让元素仅淡入一次。
- 制作轻微浮动的提示。
从输入到检查结果
- 1
选择fade、slide、scale、rotate、bounce、shake、float或pulse。
- 2
输入便于识别的动画名称。
- 3
设置时长、延迟、缓动、次数和方向。
- 4
重新播放，查看开始与结束状态。
- 5
生成CSS，并在实际页面和减少动态效果模式下检查。
简短入场
- 输入
- fade；0.4秒；ease-out；1次
- 结果
- 不透明度从0变为1。
fill-mode固定为both，没有单独的选择项。
轻微浮动
- 输入
- float；距离20px；alternate；infinite
- 结果
- 在translateY(0)与translateY(-20px)之间移动。
这是浮动预设，不是连续旋转动画。
计算与处理原理
预设提供transform和opacity关键帧。简写声明包含名称、时长、缓动、延迟、次数、方向和固定的both。与简写关键字冲突的名称会添加前缀。减少动态效果规则关闭动画并恢复可见状态。
限制与注意事项
- 不支持任意编辑关键帧。
- rotate是入场旋转，不是持续360度旋转。
- 生成的transform可能与组件原有变换冲突。
- 关闭动效后，仍需检查状态变化能否被理解。
数据处理
名称、设置和预览在浏览器内处理。
参考资料
相关工具
- 玻璃拟态CSS生成器
在有纹理的背景上放置卡片。
- Flexbox布局练习
居中显示空状态内容。
常见问题
可以用linear作为名称吗？
它会被转换成animation-linear，避免与缓动关键字混淆。
能修改fill-mode吗？
当前固定输出both，需要其他值时请修改生成结果。
为什么保留reduced-motion规则？
它为希望减少动态效果的用户提供替代显示，也需要在实际组件中验证。