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  }}