CSS Animations & Transitions
View Transitions
Create coordinated transitions between page states and documents with named snapshots and view-transition pseudo-elements. You will name transition participants, style snapshot pseudo-elements, enable document navigation, and account for reduced motion.
A view transition animates visual snapshots; the document underneath still owns structure, focus, and interaction. The animation should explain continuity between states without delaying navigation or obscuring the final document.
View transitions let the browser preserve visual continuity across DOM updates or same-origin navigation without rebuilding each movement from manually positioned clones. The browser captures snapshots, while the author controls which elements participate independently and how those snapshots animate. This topic also connects with Entry & Exit Transitions and CSS Animations.
The browser animates snapshots
A view transition captures the old and new visual states, places their snapshots in a temporary pseudo-element tree, and animates between them. The document remains the source of semantics and interaction.
Name only the elements that need independent motion
Example
css
.product-image {
view-transition-name: product-image;
display: grid;
min-height: 10rem;
place-items: center;
background: #dbeafe;
color: #172554;
transition: background-color 200ms;
}
.product-image.is-updated {
background: #bbf7d0;
}
::view-transition-old(product-image),
::view-transition-new(product-image) {
animation-duration: 300ms;
animation-timing-function: ease;
}A view-transition-name must be unique among participating elements in the active view. Leave ordinary content in the root transition unless separate timing or movement improves continuity.
Cross-document transitions
Example
css
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*) {
animation-duration: 0.01ms;
}
}The @view-transition rule opts same-origin document navigation into cross-document transitions. Same-document application changes still require the View Transition API to coordinate the DOM update.
Style the transition while it is active
The :active-view-transition pseudo-class matches the document root only while a view transition is running. It is useful for temporary interaction or cursor feedback without leaving a permanent class in the document.
Example
css
:root:active-view-transition {
cursor: progress;
}
:root:active-view-transition button {
pointer-events: none;
}View Transition Reference
| Syntax | Purpose | Example |
|---|---|---|
| view-transition-name | Creates an independently animated snapshot. | view-transition-name: hero |
| @view-transition | Enables cross-document navigation transitions. | @view-transition { navigation: auto; } |
| ::view-transition-old() | Selects the old snapshot. | ::view-transition-old(hero) |
| ::view-transition-new() | Selects the new snapshot. | ::view-transition-new(hero) |
| :active-view-transition | Matches the root while a view transition is active. | :root:active-view-transition |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>View Transitions example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.product-image {
view-transition-name: product-image;
display: grid;
min-height: 10rem;
place-items: center;
background: #dbeafe;
color: #172554;
transition: background-color 200ms;
}
.product-image.is-updated {
background: #bbf7d0;
}
::view-transition-old(product-image),
::view-transition-new(product-image) {
animation-duration: 300ms;
animation-timing-function: ease;
}
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*) {
animation-duration: 0.01ms;
}
}
:root:active-view-transition {
cursor: progress;
}
:root:active-view-transition button {
pointer-events: none;
}
</style>
</head>
<body>
<main><article><h1>View transition card</h1><button id="change-view" type="button">Change product</button><div class="product-image" id="product-image">Blue product</div><p>The named element receives an independent snapshot during the state change.</p></article></main><script>const button = document.querySelector("#change-view"); const image = document.querySelector("#product-image"); button.addEventListener("click", () => { const update = () => { image.classList.toggle("is-updated"); image.textContent = image.classList.contains("is-updated") ? "Green product" : "Blue product"; }; if (document.startViewTransition) { document.startViewTransition(update); } else { update(); } });</script>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| view-transition-name | 111 | 111 | 144 | 18 |
| @view-transition | 126 | 126 | No | 18.2 |
| :active-view-transition | 125 | 125 | 144 | 18 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
View transitions coordinate visual continuity by animating snapshots of old and new states. Name only the elements that need independent treatment, preserve a complete non-animated experience, and reduce or remove motion when the user requests it.
Use the smallest set of named participants that explains the state change. Excessive independent snapshots make transitions harder to reason about and more expensive to render.