CSS View Transitions Playground

New

Build same-document view transitions with live preview: fade, slide, scale and wipe, with duration, easing and reduced-motion CSS.

view transitions apicss view transitionsview-transition-namestartViewTransitionpage transition css

Read the guide

Shortcuts:⌘ KSearch?HelpD MDark modeG TAll tools

AnimationDuration: 400msEasingview-transition-name for the card (optional)

Preview

Card A

CSS + JavaScript

Same-document View Transitions ship in Chromium browsers and recent Safari and Firefox versions (check caniuse.com). Browsers without support skip the animation, so it is a safe progressive enhancement. Keep the prefers-reduced-motion rule for accessibility.

Continue with:

Frequently Asked Questions

What is the View Transitions API?

A browser API that animates between two DOM states using snapshot pseudo-elements you can style with CSS.

Does it need JavaScript?

Same-document transitions call document.startViewTransition; cross-document transitions use a CSS at-rule.

What about unsupported browsers?

They apply the change instantly without animation.

Related Tools

CSS Formatter

Format and beautify CSS code with consistent indentation and spacing.

CSS Minifier

Minify CSS by removing comments, whitespace, and redundant rules.

Box Shadow Generator

Visually build CSS box shadows with live preview and code output.