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

合成

比较合成友好属性、硬件加速提示与布局触发属性的渲染成本。

预览

实时预览

让 GPU 在独立图层上移动元素或改变其透明度，无需重新执行布局或绘制。

预览
合成
权威词义

术语定义与近义词辨析

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

核心术语compositing

合成

Compositing
权威英文定义

Letting the GPU move or fade an element on its own layer without redoing layout or paint.

中文翻译

让 GPU 在独立图层上移动元素或改变其透明度，无需重新执行布局或绘制。

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

使用这段动效前的判断

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

目的

比较合成友好属性与触发布局或绘制的属性，选择稳定的渲染路径。

频率

在新动效实现、性能回归和复杂页面集成时检查。

触发

由属性选择或性能实验触发，同时记录主线程、布局、绘制和合成活动。

进入 / 离开

实验对象直接切换属性方案，指标变化保持可读，避免附加过渡污染结果。

可打断性

测试可中断并重置图层状态，will-change 只在需要前短暂启用。

手势与键盘

手势测试按同样距离和速度驱动两种方案，确保比较公平。

减弱动效策略

低动态模式仍优先 transform 和 opacity，并减少持续图层占用。

输出

复制到你的界面

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

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

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

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

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

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

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

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

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

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

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

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

.motion-demo.motion-demo--compositing .motion-surface { position: relative; animation: motion-compositing 520ms linear infinite alternate; }
@keyframes motion-compositing { from { transform: translateX(-80px); } to { transform: translateX(80px); } }

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

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

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

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

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

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

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

交付前检查

  • 区分 Compositing、will-change 与 Layout thrashing。
  • 检查图层数量、内存和完成后的清理。
无障碍

保持信息可达

减弱动效

低动态模式仍优先 transform 和 opacity，并减少持续图层占用。

参数

参数参考

参数范围 / 选项默认值作用
duration300ms–1200ms520ms演示使用较长时长以便观察完整变化；生产界面的即时反馈应收敛到 300ms 内。
distance0px–180px80px控制元素移动的空间距离。
propertyTransform / Left / OpacityTransform选择对比属性。
ease柔和 / 清脆 / 平稳 / 匀速匀速控制速度随时间变化的方式。
相关条目
帧率（FPS）有目的的动效