View Transitions API Showcase
Explore different examples of the CSS View Transitions API in action. This demonstration showcases cross-document transitions for multi-page applications without any JavaScript framework overhead.
Image Gallery
Click any thumbnail to see it smoothly expand into a full-size
image. Each image maintains its identity across pages using unique
view-transition-name properties.
Product Catalog
Browse products with dynamic filtering. Watch as product cards transition smoothly when filtering by category, and expand into detailed views when clicked.
View ProductsHow It Works
Learn about the View Transitions API and how it creates smooth animations between page navigations using pure CSS.
Learn MoreKey Features
- Zero JavaScript - Transitions powered entirely by CSS
- Cross-Document - Smooth animations between separate HTML pages
-
Named Transitions - Elements morph seamlessly with
matching
view-transition-name -
Accessibility - Respects
prefers-reduced-motionpreferences - Browser Support - Chrome 126+, Edge 126+, Opera 112+