전환 전과 후의 화면을 자동으로 크로스페이드·모핑해주는 브라우저 네이티브 API. document.startViewTransition()으로 씁니다.
디자인 아틀라스<div class="screen" id="screen">
<div class="avatar"></div>
<div class="info"><b>Nova</b><span>Online</span></div>
</div>.screen{position:relative;width:min(90%,460px);height:70%;display:flex;align-items:center;gap:16px;padding:0 6%}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));
view-transition-name:avatar;flex:none}
.info{view-transition-name:info;display:grid;gap:4px}
.info b{font:700 16px/1 sans-serif;color:var(--fg)}
.info span{font:12px/1 sans-serif;color:var(--muted)}
.screen.detail{flex-direction:column;justify-content:center;text-align:center}
.screen.detail .avatar{width:96px;height:96px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}const screen = document.getElementById('screen');
function toggle() {
const apply = () => screen.classList.toggle('detail');
if (document.startViewTransition) document.startViewTransition(apply);
else apply();
}
setInterval(toggle, 2200);브라우저가 전환 직전 상태를 스크린샷처럼 찍어두고, DOM을 원하는 대로 바꾼 뒤 다음 상태도 찍어서 그 사이를 자동으로 크로스페이드합니다. view-transition-name을 준 요소는 이름이 같은 이전·이후 요소끼리 짝지어져 위치·크기까지 모핑됩니다(shared element transition) — 수동으로 좌표를 계산하던 FLIP을 브라우저가 대신 해주는 셈입니다.
SPA 내부 상태 전환뿐 아니라, Chrome은 same-origin 문서 간 멀티페이지 전환에도 이 API를 확장했습니다.
데모의 아바타는 리스트형에서 상세형으로 레이아웃이 바뀔 때마다 view-transition-name 덕분에 위치와 크기가 자동으로 모핑됩니다.
지원 브라우저 기준으로 점진적 향상(progressive enhancement)으로 씁니다 — startViewTransition이 없으면 그냥 즉시 바뀌게 폴백하세요.