Start a project

Tool 81 of 244 · CSS

View Transitions Builder

Builds same-document and cross-document view transitions: names, pseudo-element animations and reduced-motion handling.

View Transitions Builder

The transition

CSS and a small script

Page A — Malham table
CSS
Starter script

01

What it does

Builds same-document and cross-document view transitions: names, pseudo-element animations and reduced-motion handling.

  • Editor for transition groups and keyframes on ::view-transition-old/new/group; lints duplicate names and missing reduced-motion overrides…

02

Private by design

Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.

03

What you get

CSS, a starter script and a demo, with a Copy and a Download button on every result.

  • View Transitions
  • CSS
  • Animation

Why it matters

Builds same-document and cross-document view transitions: names, pseudo-element animations and reduced-motion handling.

Editor for transition groups and keyframes on ::view-transition-old/new/group; lints duplicate names and missing reduced-motion overrides; generates @view-transition { navigation: auto } for MPA and startViewTransition wrapper for SPA; preview with two states. Everything runs in your browser; nothing you paste is sent unless you press Fetch.

How to use it

  1. Paste or type the input the tool asks for.
  2. Read the summary and the table or preview.
  3. Adjust the options if you need a different result.
  4. Copy or download the output. Nothing leaves this page.

FAQ

Is my input uploaded?

No. The work runs in your browser and nothing you type, paste or upload is sent anywhere.

Will this change my site for me?

No. It shows results and, where it writes rules or files, you copy them and apply them yourself.

Can I rely on this as official guidance?

It follows public documentation and well-known algorithms, and tells you where it is a subset or a simulation. Confirm critical changes in the official tool or a staging environment.

Work with me

Want a site that gets these right?

I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

All developer tools · Back to leej.uk