CSS 动画生成器

设置动画名称、时长、缓动函数、延迟、播放次数与方向,并填写 from / to 关键帧的样式,工具会同时生成 @keyframes 与 animation 简写代码。全部在浏览器本地完成。

动画设置 等待输入

动画名称为必填;from / to 为关键帧的 CSS 声明。

计算结果
动画名—
时长(s)—
填写动画名称后点击生成,代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • @keyframes 定义动画的关键帧,animation 应用动画。
  • from / to 等价于 0% / 100%。
  • infinite 表示无限循环播放。
  • alternate 让动画来回播放,reverse 反向播放。
  • 为无障碍考虑,动画应尊重 prefers-reduced-motion。