CSS 动画生成器

可视化创建 CSS 关键帧动画。从 16 种预设中选择,自定义时间参数,立即复制代码。

预设动画

预览
CSS 输出
简写

关于 CSS 动画生成器

此工具帮助您无需编写代码即可创建 CSS @keyframes 动画。从 16 种内置预设中选择,如淡入、弹跳、脉冲和旋转——然后自定义持续时间、延迟、缓动等。实时查看变化并即时复制生产就绪的 CSS。

功能特点

常见问题

什么是 CSS 关键帧?

CSS @keyframes 定义动画序列中的中间步骤。您在关键百分比处(0%、50%、100%)指定 CSS 样式,浏览器在它们之间进行插值以创建流畅的动画。

生成的 CSS 是否可以直接用于生产环境?

是的!生成的 CSS 使用所有现代浏览器都支持的标准 @keyframes 和动画属性。不需要 JavaScript 运行时。

我可以组合多个动画吗?

您可以通过一起使用生成的 CSS 类或在简写属性中用逗号链式连接动画名称来组合多个动画。