View Transitions

This feature is not (yet) supported on your device

The View Transitions API enables app-like transitions between pages that can be defined using only CSS animations and transitions.

A transition can be defined for the whole view or separate HTML elements on the page. By default, a cross-fade animation is applied if the transition is not customized with CSS. If an element is present in both views but has a different position or different dimensions in the views this will also be animated by the browser automatically.

On a supporting device, choose a transition type and then navigate to another page to see the transition.

Slide Cross-fade Flip Scale Scale & slide Enlarging icons Swap

// wrapping the function that updates the DOM in document.startViewTransition will animate the change document.startViewTransition(() => updateDOM()); /* here we customize the transition, these are the shared styles for the old and new view*/ ::view-transition-new(root), ::view-transition-old(root) { animation-duration: 300ms; animation-timing-function: ease-out; animation-direction: normal; } /* old view slides out to the left */ ::view-transition-old(root) { animation-name: slide-out; } /* new view slides in from the right */ ::view-transition-new(root) { animation-name: slide-in; mix-blend-mode: normal; } /* class "back-transition" is added to the html element * to customize the back transition * new view */ .back-transition::view-transition-new(root) { animation-name: slide-out-reverse; } /* customized back transition for old view */ .back-transition::view-transition-old(root) { animation-name: slide-in-reverse; mix-blend-mode: normal; z-index: 1; } @keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(-20%); } } @keyframes slide-out-reverse { from { transform: translateX(-20%); } to { transform: translateX(0); } } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-in-reverse { from { transform: translateX(0); } to { transform: translateX(100%); } }

Documentation

View Transitions API on MDN

Browser support

View Transitions API on caniuse.com