View Transitions API Generator

The View Transitions API lets you create smooth animated transitions between page states or navigations — without JavaScript animation libraries. Call document.startViewTransition() with a callback that updates the DOM, and the browser automatically captures before/after snapshots and animates between them.

view-transition-name is a CSS property that tags an element for a 'shared element transition'. Give the same name to an element on two different pages and the browser will morph one into the other — automatically calculating the position, size, and shape change. Perfect for hero images, cards, and navigation transitions.

These are CSS pseudo-elements the browser creates during a transition. ::view-transition-old represents a snapshot of the element before the change; ::view-transition-new shows the element after. You can apply any CSS animation to them to customize the effect.

Yes! Chrome 126+ supports cross-document (multi-page) view transitions. Add @view-transition { navigation: auto; } to your CSS and transitions happen automatically on navigation — no JavaScript needed for basic use.

The fill mode controls what happens before/after an animation. 'both' applies the starting keyframe before the animation and holds the end state after — usually what you want for transitions. 'forwards' only holds the end state; 'backwards' applies the start; 'none' reverts after completion.