durationDuration
Compare how duration and delay affect response, rhythm, and perceived waiting.
Preview
Duration measures the elapsed time from an animation's start state to its end state.
FullReduced
FullReduced
Preview
Implement Duration: Compare how duration and delay affect response, rhythm, and perceived waiting. Use Duration 240ms, Delay 0ms, Easing snap. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--duration. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.
<div class="motion-demo motion-demo--duration" data-motion="duration" aria-label="Duration demo">
<article class="motion-surface">
<strong>Duration</strong>
<span class="motion-line"></span>
<span class="motion-line"></span>
</article>
</div>.motion-demo.motion-demo--duration {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
width: min(100%, 34rem);
min-height: 15rem;
padding: 2rem;
overflow: hidden;
color: #18181b;
background: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 16px;
isolation: isolate;
}
.motion-demo.motion-demo--duration *, .motion-demo.motion-demo--duration *::before, .motion-demo.motion-demo--duration *::after {
box-sizing: border-box;
}
.motion-demo.motion-demo--duration .motion-surface {
position: relative;
display: grid;
gap: 0.65rem;
width: min(100%, 18rem);
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 16px;
box-shadow: none;
}
.motion-demo.motion-demo--duration .motion-surface strong { font-weight: 500; }
.motion-demo.motion-demo--duration .motion-line {
display: block;
width: 100%;
height: 0.5rem;
background: #e4e4e7;
border-radius: 999px;
}
.motion-demo.motion-demo--duration .motion-line:last-child { width: 62%; }
.motion-demo.motion-demo--duration .motion-button {
position: relative;
min-height: 2.75rem;
padding: 0.75rem 1.1rem;
color: white;
font: inherit;
font-weight: 700;
background: #18181b;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.motion-demo.motion-demo--duration .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }
.motion-demo.motion-demo--duration .motion-action-row {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.motion-demo.motion-demo--duration .motion-replay-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--duration .motion-pausable-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--duration button.motion-surface {
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.motion-demo.motion-demo--duration .motion-replay-button,
.motion-demo.motion-demo--duration .motion-undo-button,
.motion-demo.motion-demo--duration .motion-dismiss-button,
.motion-demo.motion-demo--duration .motion-pause-button {
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
color: #18181b;
font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
background: #ffffff;
border: 1px solid #d4d4d8;
border-radius: 8px;
cursor: pointer;
}
.motion-demo.motion-demo--duration .motion-replay-button:focus-visible,
.motion-demo.motion-demo--duration .motion-undo-button:focus-visible,
.motion-demo.motion-demo--duration .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--duration .motion-pause-button:focus-visible,
.motion-demo.motion-demo--duration [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--duration [data-swipe-target]:focus-visible {
outline: 3px solid rgb(37 99 235 / 32%);
outline-offset: 3px;
}
.motion-demo.motion-demo--duration .motion-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.motion-demo.motion-demo--duration .motion-ripple-ink {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
background: rgb(255 255 255 / 72%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
}
.motion-demo.motion-demo--duration .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--duration .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--duration .motion-state--to { background: #18181b; color: white; }
.motion-demo.motion-demo--duration .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--duration .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--duration .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--duration svg { width: min(100%, 20rem); height: auto; }
.motion-demo.motion-demo--duration .motion-surface { animation: motion-duration 240ms cubic-bezier(0.16, 1, 0.3, 1) 0ms both; }
@keyframes motion-duration { from { opacity: 0.45; transform: translateX(-64px); } to { opacity: 1; transform: translateX(64px); } }
@keyframes motion-duration-reduced-fade {
from { opacity: 0.84; }
to { opacity: 1; }
}
.force-reduced-motion .motion-demo.motion-demo--duration {
animation: motion-duration-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.force-reduced-motion .motion-demo.motion-demo--duration *,
.force-reduced-motion .motion-demo.motion-demo--duration *::before,
.force-reduced-motion .motion-demo.motion-demo--duration *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.force-reduced-motion .motion-demo.motion-demo--duration .motion-button,
.force-reduced-motion .motion-demo.motion-demo--duration [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--duration [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--duration [data-spring-target] {
transform: none !important;
}
.force-reduced-motion .motion-demo.motion-demo--duration .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--duration .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--duration .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.motion-demo.motion-demo--duration {
animation: motion-duration-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.motion-demo.motion-demo--duration *, .motion-demo.motion-demo--duration *::before, .motion-demo.motion-demo--duration *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.motion-demo.motion-demo--duration .motion-button,
.motion-demo.motion-demo--duration [data-reorder-item],
.motion-demo.motion-demo--duration [data-swipe-target],
.motion-demo.motion-demo--duration [data-spring-target] {
transform: none !important;
}
.motion-demo.motion-demo--duration .motion-path { stroke-dashoffset: 0 !important; }
.motion-demo.motion-demo--duration .motion-word--from { opacity: 0 !important; visibility: hidden; }
.motion-demo.motion-demo--duration .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}Learn more
Terms and distinctions
durationDuration
时长English definition
Duration measures the elapsed time from an animation's start state to its end state.
Chinese translation
一段动画完成所需的时间。
delayDelay
延迟English definition
The delay is the interval between a trigger and the first active frame.
Chinese translation
动画开始前等待的时间。
Distinction
Delay is the wait before motion starts; Duration is the time the motion spends running.
Before implementation
- Purpose
- Compare how duration and delay affect responsiveness, reading rhythm, and perceived waiting.
- Frequency
- Calibrate every frequent interaction; low-frequency presentation motion can use a broader range.
- Trigger
- Trigger on control-state changes, using delay only to express dependency within the interaction.
- Enter / exit
- Entrances can run slightly longer than exits; closing, undoing, and returning respond quickly.
- Interruptibility
- New input cancels pending delay immediately and transitions from the current value to the latest target.
- Gesture and keyboard
- During continuous adjustment, update the target live and settle only as needed after release.
- Reduced-motion strategy
- Make nonessential transitions effectively immediate and remove delay.
Accessibility
Reduced motion
Make nonessential transitions effectively immediate and remove delay.
Parameter reference
| Parameter | Range / options | Default | Purpose |
|---|---|---|---|
duration | 80ms–1200ms | 240ms | Controls the time required for one motion cycle. |
delay | 0ms–600ms | 0ms | Controls the wait before motion begins. |
ease | Soft / Snap / Calm / Linear | Snap | Controls how velocity changes over time. |
Pre-delivery review
- Evaluate duration at real interaction frequency, beyond a single replay.
- Ensure delay never makes input appear unresponsive.