CSS Animations & Transitions

View Transitions

Written by Swapnil RajaPublished 30 Jul 2026

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.

PreviousScroll Animations NextMotion Paths