CSS View Transitions Generator
Generate CSS for the View Transitions API. Set up @view-transition rules, assign view-transition-name to elements, and customize pseudo-element animations for smooth page transitions.
🔒Privacy first: All generation happens in your browser. No data is sent anywhere.
Transition Elements
How to Use the CSS View Transitions Generator
1
Set Transition Timing
Configure crossfade duration and timing function for the default ::view-transition-group animation. These apply to all transitioning elements.
2
Add Named Elements
Enable named element transitions and list the elements that should animate independently. Elements with the same name in old and new states will morph between positions.
3
Copy & Use
Copy the generated CSS into your stylesheet. Add view-transition-name to matching DOM elements in your app and call document.startViewTransition() to trigger transitions.
View Transitions API Reference
| Property / Rule | Purpose |
|---|---|
| @view-transition { navigation: auto; } | Enables cross-document view transitions (MPA) |
| view-transition-name: foo | Assigns an element to participate independently in the transition |
| ::view-transition-group(foo) | Pseudo-element wrapping the old and new states |
| ::view-transition-old(foo) | Snapshot of the element before the transition |
| ::view-transition-new(foo) | Live representation of the element after the transition |
Frequently Asked Questions
The CSS View Transitions API allows you to create smooth animated transitions between different states of a page, typically when navigating between routes in a single-page application. It uses the @view-transition at-rule and view-transition-name property to control which elements participate in transitions.
When a transition triggers, the browser captures the old and new state of the page. It then creates a crossfade between the two states by default. You can customize this by styling the ::view-transition-old() and ::view-transition-new() pseudo-elements with custom animations.
view-transition-name is a CSS property that assigns a name to an element so it participates independently in the view transition. Elements with the same name in the old and new state will morph smoothly between their positions and sizes, rather than crossfading.
Chrome 111+, Edge 111+, Opera 97+, and Android WebView 111+ support the View Transitions API. Safari and Firefox have the feature under development. For cross-browser use, treat it as a progressive enhancement.
Yes, the Cross-document View Transitions spec (Chrome 126+) allows transitions across full page navigations (MPA). You use the same @view-transition at-rule with navigation: auto to enable cross-document transitions.
Related Tools
Ad