Motion Lexicon
Search/
中文
System
Playground

Duration

Compare how duration and delay affect response, rhythm, and perceived waiting.

Preview

Live preview

How long an animation takes.

Preview
Duration
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termduration

Duration

时长
Authoritative definition

How long an animation takes.

Chinese translation

一段动画完成所需的时间。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the 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.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--duration {
  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: 12px;
  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: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.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: 7px;
  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: 7px;
  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: 8px; }
.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; }
}
Review notes

Pre-delivery review

  • Evaluate duration at real interaction frequency, beyond a single replay.
  • Ensure delay never makes input appear unresponsive.
Accessibility

Keep information accessible

Reduced motion

Make nonessential transitions effectively immediate and remove delay.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms240msControls the time required for one motion cycle.
delay0ms–600ms0msControls the wait before motion begins.
easeSoft / Snap / Calm / LinearSnapControls how velocity changes over time.
Related entries
StaggerKeyframesTranslate