Your input data is never sent to any server
Ready to use immediately without an account
Check transition animations in real time
* Target values (To) for the exiting `::view-transition-old` element
* Starting values (From) for the entering `::view-transition-new` element
🔗 Related Tools
📖 About this Tool
The CSS View Transition Generator is a completely free developer tool that allows you to visually construct and preview smooth page transition animations using the next-generation "View Transition API".
You can achieve seamless screen transitions using only native browser features, eliminating the need for complex animation libraries often used in Single Page Applications (SPAs). Fine-tune the pseudo-element animations for exiting (old state) and entering (new state) elements, and copy the ready-to-use CSS and JavaScript code instantly.
This tool runs entirely in your browser (client-side). Your input data is never sent to any external server, ensuring complete safety and privacy.
🔰 How to Use
1. Select a Preset or Base Setting
First, select a preset such as "Fade" or "Slide", or enter a view-transition-name to define the base state.
2. Preview and Fine-tune
Click the "Play / Toggle State" button to see the actual mockup screen transition. Switch between the Old and New state tabs to adjust animation parameters (like opacity, scale, transiton) to create your perfect effect.
3. Copy Code for Production
Copy the generated code from the CSS, JavaScript, and HTML tabs and integrate it into your project (supports both SPA and MPA).
📚 Glossary
- View Transition API
- A native mechanism where the browser automatically captures screenshots of the DOM before and after changes and animates the transition between them seamlessly.
- view-transition-name
- A CSS property to identify elements targeted for transition animations. Elements with the same name across old and new DOM states are animated together.
- ::view-transition-old
- A pseudo-element containing the screenshot of the "old state" before the transition. Animating this pseudo-element controls the exit effect (e.g., fade out, slide away).
- ::view-transition-new
- A pseudo-element containing the live representation (screenshot) of the "new state". Animating this controls the enter effect (e.g., fade in, slide in).
- Cross-document View Transitions
- An extended specification that allows you to animate transitions between regular multiple pages (MPA navigations), not just within an SPA via JavaScript, using meta tags and CSS.
⚙️ Tech Details
The View Transition API hooks into the moment developers update the DOM, requesting the browser engine to perform specific tree manipulations.
1. Capture Phase
When document.startViewTransition() is called, the browser pauses rendering and captures the current screen state (old state).
2. DOM Update & New Capture
After the DOM is updated inside the callback function, the browser takes a capture of the new screen state (new state).
3. Pseudo-element Tree Construction & Animation
A special pseudo-element tree starting with ::view-transition is temporarily attached to the top of the existing DOM. Beneath it, a default cross-fade animation automatically runs from the old capture (::view-transition-old) to the new capture (::view-transition-new). The code generated by this tool overrides this default cross-fade with your custom animations.
❓ FAQ
- Q. Is my data sent to a server?
- A. No. This tool operates entirely within your browser, so your input is never sent externally.
- Q. Can I use it on a smartphone?
- A. Yes, it fully supports mobile and tablet browser environments.
- Q. Do View Transition animations work on all browsers?
- A. It is supported from Chrome 111, Edge 111, and Safari 18 onwards. In unsupported browser environments, the animation is simply skipped, acting as a safe and instant fallback.
- Q. Can I use it outside of an SPA (Single Page Application)?
- A. Yes. For standard Multi-Page Applications (MPA) on the same origin, you can achieve transitions just by adding
<meta name="view-transition" content="same-origin" />and specific CSS. - Q. What should I put in `view-transition-name`?
- A. Set it to any unique string within the page (e.g., `main-content`, `hero-image`). Be careful: if multiple elements have the exact same name active at once, the transition will fail.
- Q. Do I need JavaScript to create transitions?
- A. In an MPA (Cross-document navigation) on the same origin, you can implement the transition animation without writing any JavaScript, relying purely on CSS and meta tags.
💡 Use Cases
E-commerce Product Details
When clicking a thumbnail on the product list page, the image elegantly scales up and seamlessly morphs into the product details page header.
Native App-like UI Progressions
In response to swipe or click actions, the screen slides to the left or right, mimicking the familiar navigation animations of native iOS or Android apps perfectly in the browser.
Dark Mode Toggle
When switching to dark mode from settings, rather than an instant blink across the screen, a circular crop effect expands to cover the viewport fluidly.
List Sorting and Filtering
When refining a list of items, filtering causes removed items to fade out smoothly, while the remaining items glide gracefully into their new positions.
- CSS Box-Shadow Generator｜Multi-Layer & Presets
- CSS Clip-Path Generator｜Drag & Drop Editor with Presets
- CSS Animation Generator｜@keyframes Code Output
- CSS Gradient Generator｜Linear, Radial & Conic with CSS Patterns
- CSS Sprite Animation Generator｜Auto-Generate steps() Code
- CSS Scroll Animation Generator | JS-Free Scroll-Driven Effects
- CSS Clamp() Generator | Responsive Fluid Typography Calculator
- SVG to CSS Background Generator | Data URI Converter & Optimizer
- CSS Text Animation Generator | Copy & Paste Reveal Effects
- CSS Container Query Generator | Build @container Rules Visually
- CSS @property Animation Generator | Animate Custom Properties Visually
- CSS Filter & Blend Generator | Visual Image Effects Editor
- CSS Layout Generator — Visual Grid & Flexbox Code Builder