CSS View Transitions Generator

Generate the complete CSS and JavaScript for a View Transitions API animation — including view-transition-name assignment, ::view-transition-old() and ::view-transition-new() keyframes, and the required document.startViewTransition() call. Choose a transition type (fade, slide, scale, or custom) to get production-ready output.

How to use the CSS View Transitions Generator

1. Enter a transition name — this becomes the value of view-transition-name on the element you want to animate and is used in the ::view-transition-old(name) / ::view-transition-new(name) pseudo-element selectors. 2. Set the duration and easing. 3. Pick a type: Fade cross-fades old and new; Slide variants translate old/new in opposite directions; Scale scales from small to full; Custom outputs empty keyframe stubs you can fill. 4. Copy the output — it includes the CSS and a ready-to-use JS snippet. Add view-transition-name: [name] to your element, and call document.startViewTransition(() => updateDOM()) from JavaScript when the state changes.

The View Transitions API — what it is and how it works

The View Transitions API (shipped in Chrome 111, Safari 18, Firefox behind a flag as of 2024) makes smooth animated transitions between DOM states a first-class browser feature. When you call document.startViewTransition(callback), the browser captures a screenshot of the current state, runs your callback (which updates the DOM — e.g. routing to a new page or toggling a panel), then cross-fades the snapshot with the new state. The entire fade happens in CSS via the ::view-transition-group, ::view-transition-image-pair, ::view-transition-old, and ::view-transition-new pseudo-elements.

Individual elements can opt in with view-transition-name: heroImage. When a named element exists in both old and new states, the browser automatically interpolates its position, size, and appearance across the transition — the "shared-element" pattern previously requiring JavaScript animation libraries. No FLIP calculation, no getBoundingClientRect bookkeeping; the browser handles it. Custom keyframes on ::view-transition-old(name) and ::view-transition-new(name) override the default cross-fade for that element.

The API is also being extended to same-document navigation via @view-transition { navigation: auto; }, enabling SPA-style page transitions with no JavaScript at all (Chrome 126+). Feature-detect with if (!document.startViewTransition) return; — without the check the callback just runs synchronously in unsupported browsers.

Common use cases

  • SPA page transitions — wrap your router's DOM update in startViewTransition() for automatic cross-fades between pages in React, Vue, or vanilla JS without a library.
  • Shared hero images — give a thumbnail and its expanded view the same view-transition-name so the browser morphs the position and size with zero JS.
  • List reordering — animate list items rearranging (e.g. sort, filter) by wrapping the DOM mutation in a view transition — the browser interpolates positions automatically.
  • Theme toggle — cross-fade between light and dark themes when toggling the data-theme attribute inside startViewTransition().
  • Modal / detail panels — scale or slide a card into a detail view using a shared view-transition-name so the card appears to expand in place.

Frequently asked questions

What browsers support the View Transitions API?
Chrome 111+ and Edge 111+ have full support. Safari 18 added support. Firefox has a flag (layout.css.view-transitions.enabled) but no stable release yet as of mid-2024. Use a feature check (if (!document.startViewTransition)) and fall back to a direct DOM update.

What is view-transition-name used for?
It tags an element so the browser tracks it across the transition. If the same name exists in both before and after states, the browser creates a smooth morphing animation between the two positions and sizes. Each named element gets its own ::view-transition-old(name) and ::view-transition-new(name) pseudo-elements you can style independently.

Does view-transition-name have to be unique?
Yes — each value must be unique in the DOM at any given time. Duplicate names cause the transition to be skipped for those elements. Use JavaScript to assign unique names dynamically if you need to transition list items.

How do I trigger a view transition on cross-document navigation?
Add @view-transition { navigation: auto; } to your CSS. Chrome 126+ will automatically animate page loads in the same origin using the default cross-fade, with no JavaScript required.

What is the default transition if I don't override the keyframes?
A 0.25s cross-fade between old and new, driven by the browser's built-in ::view-transition-old and ::view-transition-new keyframes (which animate opacity 1→0 and 0→1 respectively). You only need to write custom keyframes when you want a different animation.