::view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

::view-transition CSS 의사 요소는 모든 뷰 전환 스냅샷 그룹을 포함하고, 페이지의 모든 다른 콘텐츠 위에 위치하는 뷰 전환의 오버레이의 루트를 나타냅니다.

뷰 전환이 이루어지는 동안, ::view-transition뷰 전환 의사 요소 트리 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 트리의 최상위 레벨 노드이며 하나 또는 하나 이상의 ::view-transition-group 를 자식 요소로 가집니다.

::view-transition 는 UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.

css
html::view-transition {
  position: fixed;
  inset: 0;
}

모든 ::view-transition-group 의사 요소는 뷰 전환 루트에 상대적으로 위치합니다.

구문

css
::view-transition {
  /* ... */
}

Examples

css
::view-transition {
  background-color: rgb(0 0 0 / 25%);
}

명세서

Specification
CSS View Transitions Module Level 1
# selectordef-view-transition

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

같이 보기