Working out the total length of a stagger
A staggered animation moves a list or a grid of cards one after another at a fixed step. A slightly larger step stretches the total in proportion to the number of elements, so it pays to know in advance when the last element finishes. Enter the count, the step and the length of a single element's animation and you get every start and end time plus the total.
How it is calculated
Element k starts at first delay + (k - 1) x step and ends one animation length later; the total is the end time of the last element. The number moving at once is the floor of length divided by step, plus one. As of October 2026 the W3C specifications and the web accessibility guidelines set no recommended stagger step in ms, so this tool proposes none.
Limits
Easing curves, rendering cost and delays from elements scrolling into view are not included, and the tool does not judge whether a step is appropriate. A long stagger makes people wait before they can act, so respect prefers-reduced-motion and offer a path that turns the sequence off.
Frequently Asked Questions
There is no official recommended step, so this tool does not propose one. Enter your own step and it returns the total length and how many elements move at once, which is what you adjust against.
The elements never overlap and play one by one, leaving an idle gap equal to the difference between step and length. The result note states whether they overlap.
Yes, as long as each element carries its zero-based index in the --i custom property. If you prefer nth-child, copy the start time from the table into each element's animation-delay.