Motion Lexicon
搜索/
English
系统
参数工具

时长

比较时长与延迟对响应速度、节奏和可感知等待的影响。

预览

实时预览

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

预览
时长
权威词义

术语定义与近义词辨析

英文定义逐字保留自 Animation Vocabulary；中文翻译和辨析帮助你选对术语。

核心术语duration

时长

Duration
权威英文定义

How long an animation takes.

中文翻译

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

查看全部 91 个术语
设计规范

使用这段动效前的判断

目的、频率、触发、时序、可打断性和手势规则共同决定实现。

目的

比较时长与延迟对响应速度、阅读节奏和可感知等待的影响。

频率

每种高频交互都需要校准；低频展示动画可采用更宽松范围。

触发

由控件状态变化触发，同一交互中的延迟只用于表达依赖关系。

进入 / 离开

进入通常比退出稍长；关闭、撤销和返回应快速响应。

可打断性

新输入立即取消等待，并从当前值过渡到最新目标。

手势与键盘

连续调节时实时更新目标，释放手势后只执行必要的收敛。

减弱动效策略

将非必要时长压缩到接近即时，延迟归零。

输出

复制到你的界面

当前参数会同步生成视觉状态 CSS、语义 HTML、所需的原生 JS 运行时和交互提示词。

随参数实时更新
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; }
}
检查要点

交付前检查

  • 用真实操作频率评估时长，避免只看单次演示。
  • 确认延迟不会让用户误以为输入失效。
无障碍

保持信息可达

减弱动效

将非必要时长压缩到接近即时，延迟归零。

参数

参数参考

参数范围 / 选项默认值作用
duration80ms–1200ms240ms控制一次动效完成所需的时间。
delay0ms–600ms0ms控制动效开始前的等待时间。
ease柔和 / 清脆 / 平稳 / 匀速清脆控制速度随时间变化的方式。
相关条目
交错动画关键帧位移