steps() 是如何为 sprite sheet 制作动画的？

steps(n) 把动画分成 n 个相等的区块并在它们之间跳跃，而不做插值，因此 background-position 会从一帧突变到下一帧。使用等于帧数的 steps() 意味着每帧只显示一步，不会有模糊的过渡位置。

我需要上传我的图片吗？

不需要。上传一张 sprite sheet 会给你实时预览，但你也可以仅凭帧宽度、高度和数量生成正确的 CSS。没有图片时，预览会显示一个占位网格，而计算和输出仍然准确。

单行模式和网格模式有什么区别？

单行模式假设所有帧都在一条水平帧带上，并发出一个紧凑的 from/to 关键帧。网格模式通过为每帧发出一个 background-position 停点、先跨列再换行来处理多行 sprite sheet，并添加 background-size，让整张 sprite sheet 正确缩放。

我应该设置 FPS 还是总时长？

当你知道每秒应播放多少帧时用 FPS；工具会用帧数除以 FPS 把它换算成时长。当你希望整个循环无论帧数多少都耗时特定毫秒数时，用总时长。

如何让动画永远循环或只循环几次？

选择「Infinite」实现不停循环，它映射到 animation-iteration-count: infinite。选择「Count」并输入一个数字，让序列播放固定次数，并用方向选项实现 reverse 或 alternate 播放。

我的 sprite sheet 会被上传到任何地方吗？

不会。图片用你浏览器的 FileReader 在本地读取以构建预览，绝不会离开你的设备；生成的 CSS 完全在你的机器上计算。

sprite sheet CSS 动画生成器

在你的浏览器中直接把一张 sprite sheet 变成可复制粘贴的 CSS steps() 动画，并带有实时预览。

你的 sprite sheet 在浏览器本地读取以构建预览并生成 CSS；图片绝不会被上传，始终留在你的设备上。

在整理输出？试试 CSS 格式化工具。

关于 sprite sheet CSS 动画生成器

这款 sprite sheet CSS 动画生成器会把一条帧带或一个网格变成基于 @keyframes 和 steps() 时序函数、可直接粘贴的 CSS 动画。放入一张 sprite sheet 图片以获得实时预览，或者只输入帧宽度、高度和数量，让工具替你计算 background-position。它既能处理单个水平行，也能处理完整网格，按行优先先跨列再换行地遍历帧，并把关键帧与 background-size 配对，使每个单元格都精确落位。用 FPS 或总时长设置速度，为动画命名，选择无限循环或固定迭代次数，并挑选一个方向。你会得到完整的 CSS——元素尺寸、@keyframes 块和 animation 简写——可复制或下载为 .css 文件。一切都在你的设备上运行，因此上传的表单会在本地读取，绝不会离开你的浏览器。

功能特性

通过拖放或文件选择器上传一张 sprite sheet 以获得即时实时预览，或仅凭尺寸工作
单行模式发出一个紧凑的 from/to 两停关键帧，让 background-position 沿帧带步进
网格模式为每帧发出一个显式的 background-position 停点，按行优先先跨列再换行
网格模式下添加 background-size，让每个单元格缩放到你的精确帧尺寸
按每秒帧数或以毫秒为单位的总时长设置时序
选择无限循环或固定迭代次数，以及 normal、reverse 或 alternate 方向
自动把动画名称净化为一个有效的 CSS 标识符
一键复制完整的 CSS，或将其下载为 .css 文件

如何使用 sprite sheet CSS 动画生成器

上传一张 sprite sheet，或跳过上传直接输入你的帧尺寸。
选择单行或网格，然后设置帧宽度、高度和数量（网格还需列数和行数）。
用 FPS 或总时长设置速度，然后为动画命名并选择迭代和方向。
在实时预览中观察元素动画，确认取帧是否正确。
复制生成的 CSS，或将其下载为 .css 文件并放入你的项目。

示例

输入

8 frames, 64×64 each, single row, 12 fps, infinite

输出

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

单行 sprite sheet 只需 steps(8) 和一个两停关键帧即可播放所有帧。

常见错误与故障排除

动画卡顿，或露出下一帧的一小条。 — 确保帧宽度和高度与 sprite sheet 完全匹配。如果单元格大小不一，请裁剪 sprite sheet，让每一帧都是同样的尺寸。
只显示第一帧，什么都不动。 — 检查帧数至少为 2，并确保 background-repeat 保持 no-repeat，这样 sprite sheet 才不会被平铺。
网格 sprite sheet 播放了错误的帧，或斜向漂移。 — 确认列数和行数与 sprite sheet 的布局一致；工具会先从左到右再从上到下遍历帧，因此计数必须正确。
动画播放太快或太慢。 — 在 FPS 和总时长之间切换时序模式。总时长除以帧数就是每帧的时间。

常见问题

steps() 是如何为 sprite sheet 制作动画的？: steps(n) 把动画分成 n 个相等的区块并在它们之间跳跃，而不做插值，因此 background-position 会从一帧突变到下一帧。使用等于帧数的 steps() 意味着每帧只显示一步，不会有模糊的过渡位置。
我需要上传我的图片吗？: 不需要。上传一张 sprite sheet 会给你实时预览，但你也可以仅凭帧宽度、高度和数量生成正确的 CSS。没有图片时，预览会显示一个占位网格，而计算和输出仍然准确。
单行模式和网格模式有什么区别？: 单行模式假设所有帧都在一条水平帧带上，并发出一个紧凑的 from/to 关键帧。网格模式通过为每帧发出一个 background-position 停点、先跨列再换行来处理多行 sprite sheet，并添加 background-size，让整张 sprite sheet 正确缩放。
我应该设置 FPS 还是总时长？: 当你知道每秒应播放多少帧时用 FPS；工具会用帧数除以 FPS 把它换算成时长。当你希望整个循环无论帧数多少都耗时特定毫秒数时，用总时长。
如何让动画永远循环或只循环几次？: 选择「Infinite」实现不停循环，它映射到 animation-iteration-count: infinite。选择「Count」并输入一个数字，让序列播放固定次数，并用方向选项实现 reverse 或 alternate 播放。
我的 sprite sheet 会被上传到任何地方吗？: 不会。图片用你浏览器的 FileReader 在本地读取以构建预览，绝不会离开你的设备；生成的 CSS 完全在你的机器上计算。