Duration
Also called animation duration or transition duration
The length of time an animation takes from start to finish, usually set in milliseconds. It decides whether motion feels snappy or sluggish.
import { Popover } from '@base-ui/react/popover';
// Duration tokens: 150ms for hover and press feedback, 250ms for menus and
// popovers, 400ms for drawers and sheets. Exits run 20% faster.
export function NotificationsPopover() {
return (
<Popover.Root>
<Popover.Trigger className='rounded-md border px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out hover:bg-muted'>
Notifications
</Popover.Trigger>
<Popover.Portal>
<Popover.Positioner sideOffset={8}>
{/* 250ms in, 200ms out. Reduced motion: a 150ms fade with no movement. */}
<Popover.Popup className='w-72 rounded-xl border bg-background p-4 shadow-lg outline-none transition-[opacity,translate] duration-250 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:data-ending-style:-translate-y-2 motion-safe:data-ending-style:duration-200 motion-safe:data-starting-style:-translate-y-2 motion-reduce:duration-150'>
<Popover.Title className='text-sm font-semibold'>
Notifications
</Popover.Title>
<Popover.Description className='mt-1 text-sm text-muted-foreground'>
You’re all caught up.
</Popover.Description>
</Popover.Popup>
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
);
}Standardize animation durations across the app with shared tokens: 150ms for hover and press feedback, 250ms for menus, popovers, and toasts, and 400ms for drawers and full-screen sheets, all with an ease-out curve. Make exits 20% faster than entrances, and use a 150ms opacity fade instead of movement when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
Duration explained
Duration is how long an animation runs, from its first frame to its last. In CSS it is the transition-duration or animation-duration property. Animation libraries take a duration option, often in seconds, so 0.3 means 300ms.
Most interface motion lands between 150 and 400ms. Hover and press feedback, toggles, and color changes feel right at 100 to 200ms. Menus, popovers, and toasts sit around 200 to 300ms, and large movements such as a full-screen sheet can take 300 to 500ms. Past about 500ms, motion starts to feel like waiting.
Scale duration with distance and size: a panel that crosses the screen needs more time than a button that shifts 2px. Make exits a little faster than entrances, and keep anything people trigger many times a day short. For people who prefer reduced motion, swap movement for a quick fade.
Often confused with
- Delay
- Delay is the wait before an animation starts. Duration is how long it runs once it does.
Related terms
All termsDelay
The wait between the moment an animation is triggered and the moment it starts moving, used to sequence motion or ignore brief triggers.
Ease-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
Perceived performance
How fast an app feels to people, which skeleton screens, instant feedback, and progressive loading can improve even when the real wait stays the same.
Frequency of use
The rule that the more often people see an animation, the shorter and subtler it should be, so everyday actions never feel slow.
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.