CSS 关键帧生成器

输入动画名称,并按每行「偏移量 | CSS 声明」的格式填写多个关键帧(如 0% | opacity: 0;),工具会生成多步 @keyframes 代码,适合复杂动画。全部在浏览器本地完成。

关键帧设置 等待输入

每行一个关键帧,用竖线 | 分隔偏移量与 CSS 声明。

计算结果
动画名—
帧数—
填写动画名称与关键帧后点击生成,代码将显示在这里。

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

计算说明
  • @keyframes 内可定义任意多个百分比关键帧。
  • 偏移量可用百分比(0%~100%)或 from / to。
  • 每个关键帧内可写多条 CSS 声明。
  • 同一属性的相邻关键帧之间会做插值过渡。
  • 关键帧顺序不影响结果,浏览器会按偏移量排序。