Delay
Also called animation delay or transition delay
The wait between the moment an animation is triggered and the moment it starts moving, used to sequence motion or ignore brief triggers.
import { Tooltip } from '@base-ui/react/tooltip';
// Wait this long on hover, so a pointer passing over the toolbar
// doesn't flash every label on its way somewhere else.
const HOVER_DELAY = 500;
const tools = [
{ label: 'Bold', glyph: 'B', style: 'font-bold' },
{ label: 'Italic', glyph: 'I', style: 'font-serif italic' },
{ label: 'Underline', glyph: 'U', style: 'underline' }
];
export function FormattingToolbar() {
return (
// closeDelay 0 hides right away; keyboard focus opens with no delay.
<Tooltip.Provider delay={HOVER_DELAY} closeDelay={0}>
<div
role='group'
aria-label='Text formatting'
className='flex gap-1 rounded-lg border bg-background p-1'
>
{tools.map((tool) => (
<Tooltip.Root key={tool.label}>
<Tooltip.Trigger
aria-label={tool.label}
className={`grid size-8 place-items-center rounded-md text-sm hover:bg-muted ${tool.style}`}
>
{tool.glyph}
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Positioner sideOffset={8}>
<Tooltip.Popup className='rounded-md bg-foreground px-2 py-1 text-xs text-background transition-opacity duration-150 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0'>
{tool.label}
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
))}
</div>
</Tooltip.Provider>
);
}Show the tooltip on the toolbar icon buttons after a 500ms hover delay, then fade it in over 150ms. Hide it right away when the pointer leaves, and show it with no delay when a button gets keyboard focus.
Paste into Layerwise or any AI coding tool.
Delay explained
A delay holds an animation for a set time before it plays. Nothing moves during the wait; then the animation runs for its normal duration. In CSS it is transition-delay or animation-delay, and animation libraries take a delay option.
Delays have two common jobs. They sequence motion, so a heading lands before the text under it. They also filter out accidental triggers: a tooltip that waits about 500ms before appearing stays hidden when the pointer only passes over a button on its way somewhere else.
Keep delays short, and avoid them on direct responses. When someone clicks, the reply should start right away, or the interface feels broken. Delays add up in sequences, so check how long it takes for the last element to settle.
Often confused with
- Stagger
- A stagger gives each item in a group a slightly longer delay than the one before. A delay is one wait before one animation.
Related terms
All termsDuration
The length of time an animation takes from start to finish, usually set in milliseconds. It decides whether motion feels snappy or sluggish.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Orchestration
Coordinating several different animations into one planned sequence, so the parts of a screen enter in a clear order.
Tooltip
A small label that appears next to an element when you hover over it or focus it, naming an icon button or adding a short hint.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.