Sprite Sheet CSS Animation Generator

Turn a sprite sheet into a copy-paste CSS steps() animation with a live preview, right in your browser.

Your sprite sheet is read locally in your browser to build the preview and generate CSS; the image is never uploaded and stays on your device.

Tidying up the output? Try the CSS Formatter.

About Sprite Sheet CSS Animation Generator

This sprite sheet CSS animation generator turns a frame strip or grid into a ready-to-paste CSS animation built on @keyframes and the steps() timing function. Drop in a sprite sheet image for a live preview, or just type the frame width, height and count and let the tool do the background-position math for you. It handles both a single horizontal row and a full grid, walking frames row-major across columns and then rows, and pairs the keyframes with background-size so every cell lands exactly. Set the speed by FPS or total duration, name the animation, choose infinite or a fixed iteration count, and pick a direction. You get the full CSS — element sizing, the @keyframes block and the animation shorthand — which you can copy or download as a .css file. Everything runs on your device, so an uploaded sheet is read locally and never leaves your browser.

Features

How to use the Sprite Sheet CSS Animation Generator

  1. Upload a sprite sheet, or skip the upload and just enter your frame dimensions.
  2. Pick single row or grid, then set frame width, height and count (plus columns and rows for a grid).
  3. Set the speed with FPS or a total duration, then name the animation and choose iteration and direction.
  4. Watch the element animate in the live preview to confirm the framing is right.
  5. Copy the generated CSS or download it as a .css file and drop it into your project.

Example

Input

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

Output

.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; }
}

A single-row sheet needs only steps(8) and a two-stop keyframe to play all frames.

Common errors & troubleshooting

Frequently asked questions

How does steps() animate a sprite sheet?
steps(n) splits the animation into n equal chunks and jumps between them instead of interpolating, so background-position snaps from one frame to the next. Using steps() equal to your frame count means each frame is shown for one step with no blurry in-between positions.
Do I need to upload my image?
No. Uploading a sprite sheet gives you a live preview, but you can generate correct CSS from just the frame width, height and count. Without an image the preview shows a placeholder grid while the math and output stay accurate.
What is the difference between single-row and grid mode?
Single-row mode assumes all frames sit on one horizontal strip and emits a compact from/to keyframe. Grid mode handles multi-row sheets by emitting one background-position stop per frame, moving across columns then down rows, and adds background-size so the whole sheet scales correctly.
Should I set FPS or a total duration?
Use FPS when you know how many frames should play each second; the tool converts it to a duration by dividing the frame count by the FPS. Use total duration when you want the whole loop to take a specific number of milliseconds regardless of frame count.
How do I loop the animation forever or only a few times?
Choose Infinite for a non-stop loop, which maps to animation-iteration-count: infinite. Choose Count and enter a number to play the sequence a fixed number of times, and use the direction option for reverse or alternate playback.
Is my sprite sheet uploaded anywhere?
No. The image is read locally with your browser's FileReader to build the preview and it never leaves your device; the generated CSS is computed entirely on your machine.

Related tools

All ArrayKit tools