한 줄 요약 - 다른 페이지로 넘어갈 때 화면이 툭 끊기지 않고 부드럽게 전환되는 기능을, 이제 JavaScript 없이 CSS만으로 쓸 수 있습니다.
무슨 일이에요?
예전엔 SPA(한 페이지 안에서 화면만 바꾸는 앱)에서만 가능하던 전환 효과가, 같은 출처의 일반 페이지 이동(문서 간)에도 적용됩니다.
핵심 코드
/* 두 페이지 모두에 선언하면 이동 시 크로스페이드 */
@view-transition {
navigation: auto;
}
/* 특정 요소를 짝지어 모핑 (목록 썸네일 -> 상세 이미지) */
.hero-img {
view-transition-name: hero;
}왜 중요해요?
- 무거운 SPA 없이도 매끄러운 전환을 줄 수 있습니다.
- 미지원 브라우저는 그냥 즉시 이동하므로 안전합니다(점진적 향상). prefers-reduced-motion도 함께 고려하세요.