Morph transition

모프 전환

When two slides (or screens) contain matching objects, their position, size and colour are interpolated automatically.

Also known as: MorphMagic Move매직 무브
···
html
<div class="stage"><span class="o o1"></span><span class="o o2"></span><span class="o o3"></span></div>
css
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.o{position:absolute;display:block}
.o1{background:var(--accent);animation:m1 4s cubic-bezier(.6,0,.3,1) infinite}
.o2{background:var(--accent-2);animation:m2 4s cubic-bezier(.6,0,.3,1) infinite}
.o3{background:var(--accent-3);animation:m3 4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes m1{0%,25%{left:12%;top:20%;width:22%;height:22%;border-radius:50%}
  55%,80%{left:12%;top:60%;width:76%;height:24%;border-radius:8px}100%{left:12%;top:20%;width:22%;height:22%;border-radius:50%}}
@keyframes m2{0%,25%{left:40%;top:20%;width:22%;height:22%;border-radius:8px}
  55%,80%{left:12%;top:16%;width:34%;height:34%;border-radius:50%}100%{left:40%;top:20%;width:22%;height:22%;border-radius:8px}}
@keyframes m3{0%,25%{left:68%;top:20%;width:22%;height:22%;border-radius:50%;opacity:1}
  55%,80%{left:54%;top:16%;width:34%;height:34%;border-radius:8px;opacity:1}100%{left:68%;top:20%;width:22%;height:22%;border-radius:50%}}

PowerPoint's **Morph**, Keynote's **Magic Move** and Figma's Smart Animate work on the same principle. If two scenes contain **objects with the same identity**, the tool pairs them and interpolates position, size, rotation and colour from start to end. Unpaired objects fade in or out.

The workflow is simple: duplicate a slide, then move, resize and recolour shapes on the second copy; one transition effect turns the difference into animation. You skip keyframes, but pairing depends on object names or shapes, so naming them consistently keeps it stable.

Do not confuse it with **shape morphing (→ shape-morph)**. A morph transition interpolates whole objects (move, scale); shape morphing changes one object's outline path into another.

When to use

Use it in talks to show an idea evolving (dot → circle → chart), or in prototypes to keep elements visually continuous.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.