Steps Timing

Left. Left. Left, Right, Left.

Welcome to the choppy, punchy, mechanical side of motion.

While easing curves make motion smooth, steps() slices time into discrete chunks.

The element doesn’t glide — it jumps through time, stochastic-fantastic.

Perfect for:

• sprite animations
• progress ticks
• retro UI
• glitchy / robotic moves
• anything that should feel more machine than organic

---

The idea

Instead of continuous time…

transition-timing-function: ease-in-out;

…we get a set number of jumps:

transition-timing-function: steps(5);

That means 5 distinct positions between start and end.

---

steps(n) in one line

steps(n, jumpterm)

• n = number of slices (jumps)
• jumpterm = when the jump happens

If you skip jumpterm, the default is end.

---

step-start vs step-end

These are just shortcuts:

step-start == steps(1, start)
step-end   == steps(1, end)

• start → jump immediately, then wait
• end → wait, then jump at the end of each slice

---

Live Demo — two rockets, one launch

Hover the stage.
Left rocket uses steps(5, start).
Right rocket uses steps(5, end).

steps(5, start)

steps(5, end)

---

Why it matters

Two transitions can have:

• the same duration
• the same distance
• the same property

…and still feel totally different because time was sliced differently.

That’s steps.

---

➡️ Next page: Transitioning Transforms — Soft entry, Bouncy hover, Mirror madness, and Zoo breakout.