CSS 动画生成器
开发
从六种常见动画模式（fade、slide、bounce、spin、pulse、shake）中选一个，用实时滑块调整 duration、delay、timing function、iteration、direction、fill-mode。预览面板在真实 DOM 元素上运行动画，便于复制前确认实际效果。生成 @keyframes 块与对应的 `.box { animation: … }` shorthand 一并复制到项目。
—
预览
生成的 CSS
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 1s ease 0s 1 normal none;
}生成的 CSS 使用标准属性 — 无供应商前缀。所有现代浏览器均支持 unprefixed。
使用方法
- 选预设（fade、slide、bounce 等）。
- 调整 duration、delay、easing、iteration、direction、fill-mode。
- 查看预览并复制生成的 CSS。
常见问题
- 为什么元素结束后回到初始？
- `animation-fill-mode` 默认 `none` — 样式仅在动画期间应用。设 `forwards` 可保持最终 keyframe 状态。
- 迭代 `1` 与 `infinite` 区别？
- iteration 表示运行 keyframes 多少次后停止。`infinite` 永久循环 — 适合 spinner，但离屏元素也会持续耗 CPU。
- 可与 `prefers-reduced-motion` 配合？
- 可以。将 `.box` 规则包入 `@media (prefers-reduced-motion: no-preference) { … }`，对动效敏感用户自动 opt-out。
- `spin` 看不出 easing？
- Spin 是匀速旋转 — 单一旋转变量上的 easing 几乎呈线性。easing 在有起止状态的属性（opacity、translate）上最明显。