Animate between DOM states with startViewTransition, view-transition-name, cross-document transitions, and pseudo-element targeting.
0 / 5 completed
1 / 5
What does document.startViewTransition(callback) do?
startViewTransition: the browser freezes the old state into a pseudo-element tree, executes your DOM update callback, then crossfades between old and new. The default is a full-page crossfade, but you can override via CSS targeting the ::view-transition-* pseudo-elements.
2 / 5
What is view-transition-name CSS property used for?
view-transition-name:view-transition-name: hero-image on an element in both before and after states tells the browser to independently animate that element — moving, scaling, and crossfading it separately from the rest of the page, creating a seamless "hero" transition effect.
3 / 5
What are cross-document view transitions and what is required to enable them?
Cross-document transitions: previously view transitions only worked for SPA navigation. With @view-transition { navigation: auto } on both origin pages, the browser automatically captures and animates between MPA page loads. This requires same-origin navigation and works without any JavaScript.
4 / 5
How do you customise the animation of a view transition pseudo-element?
Targeting pseudo-elements:::view-transition-old(hero-image) { animation: slide-out 0.3s ease; } replaces the default crossfade for your named element. ::view-transition-group(hero-image) controls the container that moves between positions. Full CSS animation power is available.
5 / 5
What does the ViewTransition object returned by startViewTransition expose?
ViewTransition object:ready resolves after the old state is captured and pseudo-elements are in the DOM — ideal for adding Web Animation API animations. finished resolves after cleanup. skipTransition() immediately jumps to the end state without animation, useful for reducing-motion preferences.