/* * Persistent Header Page Transition * * Contract: * - Include this stylesheet in every participating same-origin document. * - Mark exactly one persistent header with data-page-transition-header. * - Put destination page content inside
for the legacy fallback. * - Load page-transition.js with defer. */ :root { --page-cover-duration: 250ms; --page-cover-easing: linear; } @view-transition { navigation: auto; } /* Fallback for browsers without cross-document View Transitions. */ body:not(.page-transition-ready) main { transform: translate3d(100vw, 0, 0); } body.page-transition-ready main { animation: page-cover-fallback var(--page-cover-duration) var(--page-cover-easing) both; transform-origin: 50% 8%; will-change: transform; } @keyframes page-cover-fallback { from { transform: translate3d(100vw, 0, 0); } to { transform: translate3d(0, 0, 0); } } @supports (view-transition-name: root) { [data-page-transition-header] { view-transition-name: persistent-page-header; } /* The native transition replaces the legacy
entrance. */ body:not(.page-transition-ready) main, body.page-transition-ready main { animation: none !important; transform: none !important; will-change: auto; } ::view-transition-group(root) { animation-duration: var(--page-cover-duration); animation-timing-function: var(--page-cover-easing); } ::view-transition-image-pair(root) { isolation: auto; } /* Keep the outgoing page stationary behind the destination page. */ ::view-transition-old(root) { animation: none; mix-blend-mode: normal; z-index: 1; } /* Slide only the destination page over the outgoing snapshot. */ ::view-transition-new(root) { animation: page-cover-enter var(--page-cover-duration) var(--page-cover-easing) both; mix-blend-mode: normal; z-index: 2; } /* Freeze the outgoing header above both page snapshots. */ ::view-transition-group(persistent-page-header) { animation: none; z-index: 20; } ::view-transition-old(persistent-page-header) { animation: none; mix-blend-mode: normal; opacity: 1; } /* Reveal the live destination header only after the overlay is removed. */ ::view-transition-new(persistent-page-header) { animation: none; mix-blend-mode: normal; opacity: 0; } } @keyframes page-cover-enter { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* Add data-page-transition-disabled to for embeds and modal documents. */ html[data-page-transition-disabled] body main { animation: none !important; transform: none !important; transition: none !important; } html[data-page-transition-disabled]::view-transition-group(root), html[data-page-transition-disabled]::view-transition-old(root), html[data-page-transition-disabled]::view-transition-new(root) { animation: none !important; } /* Respect OS motion preferences unless opts in with data-page-transition-force. */ @media (prefers-reduced-motion: reduce) { html:not([data-page-transition-force]) body main { animation: none !important; transform: none !important; transition: none !important; } html:not([data-page-transition-force])::view-transition-group(root), html:not([data-page-transition-force])::view-transition-old(root), html:not([data-page-transition-force])::view-transition-new(root) { animation: none !important; } }