Getting Started with View Transitions

The View Transition API lets you animate between two DOM states — whether that's a page navigation or a DOM update — with a simple declarative API. No JavaScript animation library required.

Basic Usage

At its simplest, you wrap a DOM update in document.startViewTransition() and the browser handles the cross-fade:

document.startViewTransition(() => {
    // DOM update here
    document.querySelector("#content").innerHTML = newContent;
});

The browser captures a screenshot before and after the callback, then cross-fades between them. That's it — you get a smooth transition for free.

Custom Animations

You can customise the transition with CSS @keyframes using the ::view-transition-old and ::view-transition-new pseudo-elements. This gives you full control over the animation timing, easing, and transforms.

In the next post, we'll dive deeper into custom keyframes and multi-element transitions.