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

形变

在共享元素的前后布局之间建立连续形变。

预览

实时预览

一个形状平滑地变成另一个形状，例如灵动岛。

预览
形变
权威词义

术语定义与近义词辨析

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

核心术语morph

形变

Morph
权威英文定义

One shape smoothly turns into another shape, e.g. Dynamic Island.

中文翻译

一个形状平滑地变成另一个形状，例如灵动岛。

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

使用这段动效前的判断

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

目的

让一个形状平滑变为另一个形状，并保持对象身份连续。

频率

适合低频品牌符号、图标和高价值状态变化；常用控件保持更克制。

触发

由对象状态真正改变时触发，前后形状应具有可理解的对应关系。

进入 / 离开

进入与离开共享同一几何对象和插值路径；复杂路径先统一节点数量。

可打断性

中断时从当前插值形状转向新目标，避免回到任一端点。

手势与键盘

手势驱动形变要把进度连续映射到输入；离散控件提供键盘切换。

减弱动效策略

使用静态状态替换或短交叉淡化，同时保持对象位置与尺寸连续。

输出

复制到你的界面

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

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

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

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

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

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

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

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

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

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

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

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

.motion-demo.motion-demo--morph .motion-surface { width: min(100%, 18rem); transform-origin: center; animation: motion-morph 260ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes motion-morph { from { opacity: 0.65; transform: translateX(-17px) scale(0.86); } to { opacity: 1; transform: none; } }

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

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

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

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

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

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

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

交付前检查

  • 明确区分形变、共享元素过渡和布局动画。
  • 检查中间形状不会产生自相交或闪烁。
无障碍

保持信息可达

减弱动效

使用静态状态替换或短交叉淡化，同时保持对象位置与尺寸连续。

参数

参数参考

参数范围 / 选项默认值作用
duration80ms–1200ms260ms控制一次动效完成所需的时间。
mode形状形变 / 连续过渡 / 共享元素 / 布局变化形状形变选择前后状态保持连续的方式。
distance0px–120px48px控制元素移动的空间距离。
scale70%–105%86%控制元素相对最终尺寸的起始比例。
ease柔和 / 清脆 / 平稳 / 匀速柔和控制速度随时间变化的方式。
相关条目
交叉淡入淡出手风琴 / 折叠方向感过渡