Lemma
No. 032

UI Design

Duration

Duration is how long an animation takes from start to finish, usually measured in milliseconds. It sets the pace of an interface's motion.

Why it matters

Animations that drag make an app feel slow, while ones that are too fast can be missed entirely. The right duration keeps motion helpful instead of annoying.

In depth

Small changes like hovers and toggles want short durations near 150 milliseconds, while larger movements across more of the screen can run a little longer to stay readable. The key is that longer motion needs to feel purposeful, not slow, and should never leave the user waiting with no sign of progress. When in doubt, shorter usually feels better than longer.

Real-world example

A button color change at around 150 milliseconds feels instant and responsive, while a full-screen transition stretched past 400 milliseconds with no feedback starts to feel broken.

Try it
Duration600ms
Back to index