View Transitions in CSS
From the CSS cheat sheet · Modern CSS Features · verified Jul 2026
View Transitions
Native animated transitions between DOM states or page navigations.
css
/* === Same-document transitions (Baseline: all modern browsers) === */
/* JS: trigger a transition */
// document.startViewTransition(() => updateDOM())
/* CSS: opt elements into the named animation */
.card {
view-transition-name: card; /* unique per element */
}
/* Customize the auto-generated animation */
::view-transition-old(card),
::view-transition-new(card) {
animation-duration: 400ms;
}
/* === Cross-document (MPA) view transitions === */
@view-transition {
navigation: auto; /* enable on same-origin nav */
}💡 startViewTransition() captures before/after states and morphs between them
⚡ Each element with view-transition-name gets its own animated pair
📌 MPA view transitions need @view-transition { navigation: auto; } on BOTH pages
🔥 Default animation is a crossfade — override with ::view-transition-old/new