Free tool

Stagger animation calculator

Choose how many elements enter, the delay between them and how long each one takes. See when every element starts and ends, watch it play, and copy standalone HTML and CSS with one animation-delay per element. No account needed.

Total: 800 ms

total = duration + (count − 1) × delay = 400 ms + (6 − 1) × 80 ms = 800 ms

Preview

Timeline

Element	Starts	Ends
1	0 ms	400 ms
2	80 ms	480 ms
3	160 ms	560 ms
4	240 ms	640 ms
5	320 ms	720 ms
6	400 ms	800 ms

Copy the HTML and CSS

Standalone: paste it into a page, or save it as an .html file and open it. It fades each block in while it rises 24px, with one animation-delay per element.

<style>
.stagger { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stagger__item {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px;
  background: #7c5cff; color: #fff; font: 600 18px/1 system-ui, sans-serif;
  animation-name: stagger-enter;
  animation-duration: 400ms;
  animation-timing-function: ease-out;
  /* both: hidden during its delay, and stays visible after it ends */
  animation-fill-mode: both;
}
.stagger__item:nth-child(1) { animation-delay: 0ms; }
.stagger__item:nth-child(2) { animation-delay: 80ms; }
.stagger__item:nth-child(3) { animation-delay: 160ms; }
.stagger__item:nth-child(4) { animation-delay: 240ms; }
.stagger__item:nth-child(5) { animation-delay: 320ms; }
.stagger__item:nth-child(6) { animation-delay: 400ms; }
@keyframes stagger-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger__item { animation: none; }
}
</style>
<ol class="stagger">
  <li class="stagger__item">1</li>
  <li class="stagger__item">2</li>
  <li class="stagger__item">3</li>
  <li class="stagger__item">4</li>
  <li class="stagger__item">5</li>
  <li class="stagger__item">6</li>
</ol>

Made with the ramin stagger animation calculator.

Try the same delay on text

Opens the studio on a new, unsaved project with its starter headline, “MOTION, STRUCTURED”, entering from below letter by letter, 80 ms apart. It is a text example: the headline has its own number of letters and the studio picks its own entrance duration, so only the delay carries over. Every value stays editable. No account needed.

Animate text in ramin

Delay versus duration

Duration is how long one element's own entrance lasts. Delay is the gap between one element starting and the next one starting. When the delay is shorter than the duration the entrances overlap, which reads as one wave; when it is as long or longer, each element finishes before the next begins, which reads as a list being counted out. A delay of 0 ms makes everything enter together.

Elements play first to last, so element n starts at (n − 1) × delay and ends at (n − 1) × delay + duration. The last element finishes the sequence:

total = duration + (count − 1) × delay

The calculator accepts 1–50 elements, a delay of 0–500 ms and a duration of 50–3000 ms, in whole numbers.

Worked example

6 list items, 80 ms apart, each entering over 400 ms. The first starts at 0 ms, the last at 400 ms, and the sequence ends at 400 + (6 − 1) × 80 = 800 ms.

In CSS that is the same animation on every item, with animation-delay set to 0ms, 80ms, 160ms, 240ms, 320ms, 400ms, and animation-fill-mode: both so each item stays hidden until its turn and visible once it has arrived.

Stagger text, not just blocks

ramin staggers per character, word or line on any property, and writes it as ordinary keyframes you can edit. See the kinetic typography recipes for letter-by-letter entrances, or pick a curve in the easing reference to change how each element moves. For a physical settle, tune one in the spring animation playground. Given the timing in frames? Convert it with the frames to seconds and milliseconds calculator.