consolelog.tools

View Transitions CSS Generator

Generate cross-document @view-transition CSS and the same-document document.startViewTransition() JS path. Tune root + shared-element animations, preview the swap live, and export CSS, CSS + JS, or SCSS.

About this ToolHow it works, benefits & use cases

The View Transitions API lets a page animate between two states — across a same-origin navigation (multi-page apps) or after a JavaScript DOM update (single-page apps) — without hand-writing imperative animation code. This generator produces the CSS for both paths at once. For the cross-document path it emits the `@view-transition { navigation: auto; }` opt-in plus root `::view-transition-old(root)` / `::view-transition-new(root)` rules wired to generated `@keyframes`, so two pages on the same origin crossfade, slide, scale, flip, wipe, or rotate as the browser navigates between them. For shared-element morphs you add named transitions — each one prints the exact `view-transition-name` to drop on the matching source and destination element, plus its scoped `::view-transition-group/old/new(name)` rules and keyframes, so a hero image or card animates from one layout to the next. Choosing the CSS + JS format also appends a tiny `navigate()` helper that wraps `document.startViewTransition()` with a feature-detect fallback, which is how you trigger the same animations in an SPA. A live preview approximates the root swap by running the very keyframes you generate on two demo page states, and presets cover the common patterns. Everything is computed in the browser and exports as plain CSS, CSS + JS, or SCSS.

How to Use

  1. 1Decide on the cross-document checkbox: leave it on for multi-page (same-origin navigation) transitions, or turn it off if you only need the same-document SPA path.
  2. 2Pick the root animation (fade, slide, scale, flip, wipe, or rotate), set its duration in milliseconds, and choose an easing curve.
  3. 3Press "Play transition" in the preview to watch the leaving page animate out and the entering page animate in with your current settings.
  4. 4Add a shared element to morph a specific node: give it a view-transition-name and its own animation, duration, and easing — apply that same name to the source and destination element.
  5. 5Load a preset (Crossfade, Slide, Hero shared-element, Flip card, Wipe) as a starting point, then fine-tune.
  6. 6Choose CSS, CSS + JS helper, or SCSS as the output format, then copy, download, share the URL, or pipe the code to another tool.

Key Benefits

  • Generates both the cross-document @view-transition rule and the same-document startViewTransition() helper from one model
  • Nine root animations — fade, slide in four directions, scale, flip, wipe, and rotate — each with its own keyframes
  • Named shared-element transitions print the exact view-transition-name plus scoped ::view-transition-group/old/new rules
  • Live preview runs the actual generated keyframes on two demo page states so you can play the swap before shipping
  • Per-transition duration and easing, including spring-like and expo cubic-bezier curves
  • CSS + JS format includes a navigate() wrapper with a startViewTransition feature-detect fallback for unsupported browsers
  • Plain CSS, CSS + JS, and SCSS exports, all generated client-side with a shareable URL

Common Use Cases

  • Adding a crossfade or slide between pages of a same-origin multi-page site with zero JavaScript
  • Morphing a hero image or product card from a list view into a detail view as a shared element
  • Animating SPA route or content swaps by wrapping the update in document.startViewTransition()
  • Prototyping the look of a page transition and copying the CSS straight into a project
  • Producing SCSS variables for the root transition duration and easing inside a design system
Live preview · Fade · 300ms
Page A

Approximation of the root snapshot swap — real cross-document transitions run on navigation.

Root transition

ms

Shared elements (0)

Give the same view-transition-name to a source and a destination element to morph between them (hero images, cards, avatars).

No shared elements yet — the root transition still animates the whole page. Add one for hero / shared-element morphs.

Presets

Copy, download, share, or pipe to another tool

/* Cross-document (MPA) — opts both pages into same-origin view transitions. */
/* Put this rule in the CSS of BOTH the source and destination documents.    */
@view-transition {
  navigation: auto;
}

/* Root transition — applies to the whole page snapshot */
@keyframes vt-root-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes vt-root-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: 300ms ease both vt-root-out;
}
::view-transition-new(root) {
  animation: 300ms ease both vt-root-in;
}

/* ── Same-document (SPA) helper — JavaScript ──────────────────────────── */
/* Wrap any DOM update in navigate() to get a view transition where the    */
/* browser supports it, and a plain update everywhere else.                */
/*
function navigate(update) {
  // Feature-detect: fall back to a plain update on unsupported browsers.
  if (!document.startViewTransition) return update();
  return document.startViewTransition(update);
}

// Usage — mutate the DOM (swap routes / content) inside the callback:
// navigate(() => { app.render(nextRoute); });
*/

Two paths, one set of animations

Cross-document (MPA) transitions need a same-origin navigation and the @view-transition { navigation: auto; } rule in both pages — supported in Chromium. Same-document (SPA) transitions wrap a DOM update in document.startViewTransition(); choose the CSS + JS format to get a navigate() helper with a feature-detect fallback. The CSS ::view-transition-* rules and @keyframes animate both paths identically.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools