Animation duration

Duration is how long an animation takes from start to finish. In the example, both spheres travel the same distance, but one takes 300 ms and the other 900 ms, so the second feels much slower.

A good starting point for most interface animations is about 100 to 500 ms. Shorter than that and people may miss the change; longer and they end up waiting for the interface.

Match the duration to the size of the change, then test it. As a rough guide, a checkbox tick can take around 100 ms, while a panel sliding across the screen may need closer to 300–400 ms. Pro tip: if a motion feels slow, try making it shorter before changing anything else.