Delay

A delay is time that has been triggered but has not started moving yet. In CSS it is transition-delay and animation-delay, and in the shorthand it is the second time value, which is the classic misreading: transition: opacity 200ms 400ms is a fifth of a second of fade that begins four tenths of a second late, not a six hundred millisecond fade. animation-delay takes negative values as well, which start the animation part-way through instead of holding it back, and that is how a field of looping elements is knocked out of phase without writing a keyframe set per element.

Most delays in an interface are not aesthetic, they are filters. A label that appears the instant the pointer touches a control will also appear when the pointer merely crosses it on the way somewhere else, so a delay of a few hundred milliseconds is how a tooltip tells a passing pointer from a pointer that stopped. That specific use has its own name, hover intent, and its own numbers, usually somewhere between 300 and 500 milliseconds on the way in with a smaller grace period on the way out so a one pixel gap cannot kill an open menu.

Written many times over, one delay per element, the same value becomes a stagger: the delay is the unit, and the stagger is the series. That is worth keeping straight in a review, because “add a delay” and “stagger it” are different instructions, and only one of them makes the whole sequence longer.

The cost is that a delay is dead time for the reader who did mean it, so the rule of thumb runs in one direction only: delay a reveal that a passing pointer might trigger by accident, and never delay feedback for something a person deliberately did. A press that acknowledges itself a quarter of a second late does not read as considered, it reads as a slow computer, and no amount of easing after the wait recovers the impression. Where a delay exists to buy time for work rather than to filter intent, the honest version is to show that the work has started.