Harrison Merrill - Practice Site

WDD 331R Advanced CSS - Postprocessing the Cascade

View Transitions API Demo

This demo shows a list-to-detail interaction using the View Transitions API. Each card teaches a core concept: how the API works, the minimal pattern, named elements and morphs, customizing animations, cross-document transitions, limitations and compatibility, and reduced motion. Click a card to see the detailed explanation and example code for that topic.

Topics

Core Mechanism

How the snapshot-and-animate model works: the browser captures the page before and after your DOM update and animates between those two states.

Minimal Pattern

The smallest possible View Transition: wrap a normal DOM update in document. startViewTransition() to turn an instant swap into a smooth crossfade.

Named Elements & Morphs

Use view-transition-name on matching elements before and after the update so the browser can morph a card into a detail view instead of just crossfading.

Customizing the Animation

Override the default crossfade by targeting the View Transition pseudo-elements and applying your own keyframes for specific named elements.

Cross-Document Transitions

Animate full page navigations between separate HTML files using the @view-transition at-rule and navigation: auto.

Limitations & Compatibility

Honest constraints of the API: unique names, no nested transitions, iframe behavior, stacking context changes, and browser support differences.

Reduced Motion

Respect prefers-reduced-motion by shortening or effectively disabling animations on the View Transition pseudo-elements while still letting the DOM update complete.