Motion Lexicon
搜索/
English
系统
动效组件

空闲动效

用低幅度呼吸或漂浮提示元素仍处于可用、等待或活跃状态。

预览

实时预览

元素静置并等待交互时播放的细微运动。

预览
空闲动效
权威词义

术语定义与近义词辨析

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

核心术语idle-animation

空闲动效

Idle animation
权威英文定义

Subtle motion that plays while an element is just sitting there, waiting to be interacted with.

中文翻译

元素静置并等待交互时播放的细微运动。

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

使用这段动效前的判断

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

目的

通过低幅度漂浮或脉冲提示元素处于可用、等待或活跃状态。

频率

只在长时间静置时低频出现，用户开始操作后立即停止。

触发

由空闲计时器或持续状态触发，页面隐藏和元素离屏时暂停。

进入 / 离开

从稳定状态渐入低幅度循环，退出时在最近的中性帧停止。

可打断性

输入到来时取消循环并平滑回到稳定值，避免与交互反馈叠加。

手势与键盘

空闲动效不承担操作；真实控件仍提供明确点击、触摸和键盘反馈。

减弱动效策略

关闭自动漂浮和脉冲，使用静态状态标记。

输出

复制到你的界面

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

随参数实时更新
motion.css
.motion-demo.motion-demo--idle-animation {
  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--idle-animation *, .motion-demo.motion-demo--idle-animation *::before, .motion-demo.motion-demo--idle-animation *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--idle-animation .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--idle-animation .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--idle-animation .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--idle-animation .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--idle-animation .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--idle-animation .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--idle-animation .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--idle-animation .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--idle-animation button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--idle-animation .motion-replay-button,
.motion-demo.motion-demo--idle-animation .motion-undo-button,
.motion-demo.motion-demo--idle-animation .motion-dismiss-button,
.motion-demo.motion-demo--idle-animation .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--idle-animation .motion-replay-button:focus-visible,
.motion-demo.motion-demo--idle-animation .motion-undo-button:focus-visible,
.motion-demo.motion-demo--idle-animation .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--idle-animation .motion-pause-button:focus-visible,
.motion-demo.motion-demo--idle-animation [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--idle-animation [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--idle-animation .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--idle-animation .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--idle-animation .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--idle-animation .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--idle-animation .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--idle-animation .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--idle-animation .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--idle-animation .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--idle-animation svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--idle-animation .motion-surface { animation: motion-idle-animation 2500ms cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes motion-idle-animation { 0%, 100% { opacity: 1; transform: none; } 50% { transform: translateY(-8px); } }

@keyframes motion-idle-animation-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--idle-animation {
  animation: motion-idle-animation-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--idle-animation *,
.force-reduced-motion .motion-demo.motion-demo--idle-animation *::before,
.force-reduced-motion .motion-demo.motion-demo--idle-animation *::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--idle-animation .motion-button,
.force-reduced-motion .motion-demo.motion-demo--idle-animation [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--idle-animation [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--idle-animation [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--idle-animation .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--idle-animation .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--idle-animation .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--idle-animation {
    animation: motion-idle-animation-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--idle-animation *, .motion-demo.motion-demo--idle-animation *::before, .motion-demo.motion-demo--idle-animation *::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--idle-animation .motion-button,
  .motion-demo.motion-demo--idle-animation [data-reorder-item],
  .motion-demo.motion-demo--idle-animation [data-swipe-target],
  .motion-demo.motion-demo--idle-animation [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--idle-animation .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--idle-animation .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--idle-animation .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
检查要点

交付前检查

  • 确认动效只在真正空闲后开始。
  • 控制振幅和对比，避免持续吸引注意。
无障碍

保持信息可达

减弱动效

关闭自动漂浮和脉冲，使用静态状态标记。

参数

参数参考

参数范围 / 选项默认值作用
duration1000ms–6000ms2200ms控制完整循环的节奏；持续动态需要支持暂停并保持低干扰。
distance0px–24px8px控制元素移动的空间距离。
style漂浮 / 呼吸漂浮选择方式。
pause0ms–1200ms300ms调节停顿。
相关条目
循环跑马灯环绕