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.

View Gallery

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 Products

How It Works

Learn about the View Transitions API and how it creates smooth animations between page navigations using pure CSS.

Learn More

Key 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-motion preferences
Browser Support - Chrome 126+, Edge 126+, Opera 112+