Loading page
About this tool
Frame duration, sheet dimensions, refresh-rate alignment and ready-made CSS steps() keyframes for sprite sheet animation.
Sprite Animation Timing Calculator converts a frame count and a target frame rate into the numbers a sprite sheet animation actually needs: frame duration in milliseconds (1000 ÷ fps), full cycle length, sheet dimensions from the frame size and column count, and the CSS steps() keyframes that drive it. It also checks the rate against your display refresh — 24 fps on a 60 Hz screen gives 2.5 refreshes per frame, so frame lengths alternate and the motion judders — and flags GIF delays below the 2-centisecond floor browsers enforce.
Open Sprite Animation Timing Calculator on AltFTool — it loads instantly in your browser.
Enter the values you already know.
Fine-tune the options to match your scenario.
Read the result and use it in your planning or reporting.
Tells you when a rate does not divide the display refresh evenly, and which nearby rate does.
Generates single-axis CSS for a strip and paired horizontal/vertical animations for a grid sheet.
The generated CSS ships with a prefers-reduced-motion block that stops the animation.
Divide 1000 by the frame rate: at 12 fps each frame lasts 83.33 ms, at 24 fps 41.67 ms, and at 30 fps 33.33 ms. The full cycle is the frame count divided by the rate — 12 frames at 12 fps runs for exactly one second.
Pick a rate that divides your display refresh into a whole number. On a 60 Hz screen that means 60, 30, 20, 15, 12 or 10 fps, where each frame is held for 1, 2, 3, 4, 5 or 6 refreshes. 24 fps is the classic film rate but needs 2.5 refreshes per frame on a 60 Hz panel, so frames alternate between two and three refreshes and the motion visibly judders.
Animate background-position from 0 to minus the full sheet width with steps(N), where N is the number of frames in the row. steps() defaults to jump-end, meaning the last keyframe value is never displayed, so the animation lands on each of the N frames exactly once before looping.
GIF stores frame delay in hundredths of a second, and browsers clamp anything below 2 centiseconds — historically substituting 10 cs instead. That caps a GIF at roughly 50 fps and often much less. If the calculated delay comes out under 2 cs, export the animation as video or CSS rather than GIF.
Add the Sprite Animation Timing Calculatorwidget to your blog or website — free, responsive, no signup. Just keep the “Widget by AltFTool” credit link visible.
<iframe src="https://www.altftool.com/embed/widget/sprite-animation-timing-calculator"
title="Sprite Animation Timing Calculator — free AltFTool widget"
width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p style="font-size:12px;margin:4px 0 0">Widget by <a href="https://www.altftool.com/tools/all/sprite-animation-timing-calculator?utm_source=embed&utm_medium=widget">AltFTool — free online tools</a></p>