모프 전환

Morph transition

두 슬라이드(화면)에 같은 이름의 도형이 있으면, 위치·크기·색을 자동으로 이어 붙여 변형시키는 전환.

다른 이름: 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%}}

파워포인트의 **모프(Morph)**, 키노트의 **매직 무브(Magic Move)**, 피그마 스마트 애니메이트가 같은 원리입니다. 두 장면에 **같은 정체성의 객체**가 있으면 도구가 짝을 찾아 시작 상태에서 끝 상태로 위치·크기·회전·색을 보간합니다. 짝이 없는 객체는 페이드로 나타나거나 사라집니다.

작업 방식은 단순합니다. 슬라이드를 복제한 뒤 두 번째 슬라이드에서 도형을 옮기고 키우고 색을 바꾸면, 전환 효과 하나로 그 차이가 애니메이션이 됩니다. 키프레임을 직접 짜지 않아도 되는 대신, 짝 맞추기가 객체 이름이나 모양에 의존하므로 이름을 맞춰 두어야 안정적입니다.

도형의 윤곽 자체가 변하는 **셰이프 모핑(→ shape-morph)** 과 구별하세요. 모프 전환은 객체 단위의 이동·크기 보간이고, 셰이프 모핑은 한 객체의 경로(path)가 다른 경로로 변하는 것입니다.

언제 쓰나

발표에서 개념이 "변해 가는" 과정(작은 점 → 큰 원 → 그래프)을 보여 줄 때, 앱 프로토타입에서 요소가 이어지는 느낌을 낼 때 쓰세요.

페이지로 열기 ↗

항목 추가 요청

아틀라스에 없는 용어·효과·컴포넌트를 알려 주세요. 하나씩 보고 추가합니다.