Built-in toolFree · No signup

CSS View Transitions Generator

The View Transitions API lets the browser automatically animate between two DOM states — no manual position tracking, no JS animation libraries. This tool gives you a real, working demo (not a mockup) so you can see exactly how fade, slide, and scale effects feel before committing, then generates the view-transition-name CSS, the ::view-transition-old/new keyframes, and the minimal JS wrapper you need to ship it.

Share on X LinkedIn

Effect

Duration — 450ms

Timing function

Live demo — click to trigger

State A

The box morphs using the real View Transitions API with your settings above.

CSS + JS Output

/* 1. Give the transitioning element a name */.your-element {  view-transition-name: my-transition;} /* 2. Define the enter/exit animations */@keyframes cssa-slide-out {  to { transform: translateX(-40px); opacity: 0; }} @keyframes cssa-slide-in {  from { transform: translateX(40px); opacity: 0; }} /* 3. Assign them to the transition pseudo-elements */::view-transition-old(my-transition) {  animation-duration: 450ms;  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);  animation-name: cssa-slide-out;} ::view-transition-new(my-transition) {  animation-duration: 450ms;  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);  animation-name: cssa-slide-in;} /* 4. Trigger the transition from JS when you update the DOM */function updateView() {  if (document.startViewTransition) {    document.startViewTransition(() => {      // ...update the DOM here (toggle state, swap content, etc.)    });  } else {    // Fallback for browsers without support — just update directly  }}

Was this tool helpful?

How to use

Pick an effect

Fade (the browser default, just tuned timing), slide, or scale.

Tune duration & easing

Adjust until the live demo feels right — it's running the real API, not a CSS animation mockup.

Click to trigger

Watch the actual transition play in the demo box.

Copy the code

Get the view-transition-name CSS, keyframes, and the JS wrapper to call in your app.