Skip to tool

CSS View Transition Generator

Generate CSS view-transition styles.

Output will appear here…

How to Use This Tool

  1. Fill in Transition Name, Duration, and Easing. Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About CSS View Transition Generator

About CSS View Transition Generator

Generate CSS view-transition styles for smooth page and element transitions.

About

Generate CSS view-transition styles for smooth page and element transitions.
Generate CSS view-transition styles for smooth page and element transitions.
Runs in browser
Yes
No signup required
Yes

Examples

Fade

Fade
Input
{
  "name": "fade",
  "duration": "0.4s",
  "easing": "ease-in-out"
}
Output
@view-transition {
  navigation: auto;
}

::view-transition-old(fade) {
  animation: 0.4s ease-in-out both;
  animation-name: fade-out;
}

::view-transition-new(fade) {
  animation: 0.4s ease-in-out both;
  animation-name: fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

Slide

Slide
Input
{
  "name": "slide",
  "duration": "0.6s",
  "easing": "ease-out"
}
Output
@view-transition {
  navigation: auto;
}

::view-transition-old(slide) {
  animation: 0.6s ease-out both;
  animation-name: fade-out;
}

::view-transition-new(slide) {
  animation: 0.6s ease-out both;
  animation-name: fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

Minimal

Minimal
Input
{
  "name": "test",
  "duration": "0.3s",
  "easing": "ease"
}
Output
@view-transition {
  navigation: auto;
}

::view-transition-old(test) {
  animation: 0.3s ease both;
  animation-name: fade-out;
}

::view-transition-new(test) {
  animation: 0.3s ease both;
  animation-name: fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

Use Cases

  • Check css view transition generator values while you draft a page, spreadsheet, or config.
  • Fill Transition Name, Duration, Easing and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related Tools

Related tools: