View Transitions

View Transitions

Smoothly animate between different states of your page with one CSS line.

The core

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

The JS half

View Transitions also involve document.startViewTransition(() => ...) for SPA navigations. CSS part styles the snapshots:

::view-transition-group(main) {
  animation-duration: 0.3s;
}

Cross-fade

::view-transition-old(root) {
  animation: fade-out 0.4s;
}
::view-transition-new(root) {
  animation: fade-in 0.4s;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }

Named transitions

Give elements custom view-transition-name values to animate them individually.

TL;DR

• document.startViewTransition() (JS) + CSS pseudo-elements.
• ::view-transition-old/new style outgoing/incoming.
• Great for route changes and page transitions.
• Baseline in Chromium; check support.