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