CSS Cross-Page Transitions and Shared Image Animation

Key points

• Cross-document transitions are switched on with the @view-transition rule set to navigation auto, and the browser then gives a default crossfade between pages on the same site. 0:13
• Shared settings such as duration and timing go on the view transition group, while the old and new page pseudo-elements only receive the name of the keyframes animation to play. 0:59
• To keep a navbar still, give the main content its own view-transition-name (for example page-content), use that name in the pseudo-element selectors instead of root, and make sure the name matches exactly. 2:38
• A shared image transition works by giving the same view-transition-name to an image on both pages, so the browser compares its old and new position and size and animates between them, for example a card image expanding into an article heade 3:38
• Each view-transition-name must be unique on a page, transitions should be wrapped in a prefers-reduced-motion no-preference query, and because support is limited (Chrome, Edge and Safari, not Firefox) the transition should be treated as a p 4:40

Details on screen

• Group pseudo-element code — A dark code card shows ::view-transition-group(myElement) with animation-duration 1s and a purple arrow pointing at myElement.
• Card image selector — The CSS line .card img, .hero-image sets view-transition-name article-image on the card image.

Will it work in my browser?

• Property: animation-name · Chrome: 43 · Firefox: 16 · Safari: 9 · Edge: 12

Questions to check yourself