GIF / Sprite Sheet Timing Calculator
Calculate per-frame delay, sprite-sheet dimensions and a ready-to-use CSS steps() keyframe animation from frame count and fps.
About this tool
Turn a frame count and frame rate into everything you need to ship a sprite-sheet animation. Provide frames, fps OR total_duration, frame_w, frame_h and an optional column count; the tool computes the per-frame delay in milliseconds and GIF centiseconds, fills in whichever of fps/duration you omitted, lays out the sprite grid and full sheet dimensions, and generates a CSS steps() @keyframes snippet. Handy for game and UI animators building CSS sprite animations.
Frequently asked questions
How do I work out the per-frame delay for a GIF?
Divide 1000 ms by the frame rate. The tool also rounds it to the 1/100-second units that the GIF format actually stores.
How big should my sprite sheet be?
Multiply the frame width by the number of columns and the frame height by the number of rows. By default columns = ceil(sqrt(frames)); you can override with columns=.
What CSS makes a sprite sheet animate?
An animation using steps() with the same number of steps as frames, moving background-position across the sheet. The tool emits a copy-paste @keyframes snippet.