::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

브라우저 호환성

BCD tables only load in the browser

같이 보기