# CSS View Transitions API

The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states. It can animate changes within a single-page application (SPA) or even between full page navigations (MPA).

## 1. The Concept

When a transition starts, the browser captures a screenshot of the old state and the new state. It then creates a pseudo-element tree overlaying the page, allowing you to animate between the "old" image and the "new" image using standard CSS animations.

## 2. Basic Usage (SPA)

To trigger a view transition in JavaScript, wrap your DOM update logic in `document.startViewTransition()`.

```javascript
function updateContent() {
  document.startViewTransition(() => {
    // Update the DOM here
    document.body.innerHTML = '<h1>New Content</h1>';
  });
}
```

The browser automatically handles a cross-fade between the old and new states.

## 3. Customizing Transitions

You can customize the animation using CSS pseudo-elements.

*   `::view-transition`
*   `::view-transition-group(name)`
*   `::view-transition-image-pair(name)`
*   `::view-transition-old(name)`
*   `::view-transition-new(name)`

By default, everything is grouped under the `root` name.

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

## 4. Naming Elements (`view-transition-name`)

To animate specific elements independently (e.g., a header staying in place while the content fades, or an image moving from a list to a detail view), you must give them a unique `view-transition-name`.

```css
.header {
  view-transition-name: main-header;
}

.hero-image {
  view-transition-name: hero-img;
}
```

**Important:** `view-transition-name` must be unique on the page at the time of the transition.

## 5. Multi-Page Applications (MPA)

The API also supports transitions between full page reloads. To enable this, you need to add a meta tag or CSS rule.

**CSS:**
```css
@view-transition {
  navigation: auto;
}
```

When the user navigates from `page-a.html` to `page-b.html`, if both pages opt-in, the browser will perform a view transition.

## 6. Browser Support

*   **Chrome/Edge:** Supported.
*   **Safari:** In development.
*   **Firefox:** In development.

[[programming/css/css]]
[[programming/css/transitions-and-animations]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/javascript/vanilla/javascript]]