두 화면이 같은 축(X·Y·Z)을 따라 짧게 움직이며 교체되는 전환. 화면 사이의 공간적·순서적 관계를 보여줍니다.
<div class="stage"><div class="s a ax1">STEP 1</div><div class="s b ax2">STEP 2</div></div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:800 clamp(16px,6vmin,30px)/1 sans-serif;color:#fff;letter-spacing:.04em}
.a{background:linear-gradient(135deg,#3b3b98,#1e1e4a)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a)}
.ax1{animation:o 3.6s cubic-bezier(.4,0,.2,1) infinite}
.ax2{animation:i 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes o{0%,20%{opacity:1;transform:translateX(0)}38%,80%{opacity:0;transform:translateX(-12%)}95%,100%{opacity:1;transform:translateX(0)}}
@keyframes i{0%,30%{opacity:0;transform:translateX(12%)}50%,75%{opacity:1;transform:translateX(0)}90%,100%{opacity:0;transform:translateX(12%)}}머티리얼 모션의 전환 패턴입니다. 푸시처럼 화면 전체를 밀지 않고, 나가는 화면은 **조금만(약 30px)** 움직이며 흐려지고 들어오는 화면은 반대편에서 같은 거리만큼 와서 선명해집니다. 짧은 이동과 페이드를 합쳐서 "같은 축 위의 이웃 화면"이라는 느낌만 줍니다.
축에 따라 의미가 갈립니다. **X 축**은 단계 이동(온보딩 1 → 2, 스텝퍼)이고, **Y 축**은 위아래로 이어지는 흐름(스크롤하는 목록의 다음 묶음)이며, **Z 축**은 깊이(위계의 한 단계 위·아래, 크기가 커졌다 작아지는 모션)를 나타냅니다.
푸시(→ push-transition)는 화면 전체를 끌고 가서 무겁고, 공유 축은 이동량을 줄여 가볍습니다. 대신 이동량이 너무 작으면 페이드와 구별되지 않으므로 방향이 보일 만큼은 움직여야 합니다.
스텝 폼·온보딩·설정 하위 화면처럼 순서나 위계가 있는 이동에 쓰세요. 방향은 "다음 = 진행 방향" 으로 통일합니다.