Welcome to Part 35 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore the CSS View Transitions API.

The View Transitions API is a game-changer for web transitions. It makes it simple to create smooth transitions between DOM states (or pages) without relying on heavy JavaScript animation libraries. By capturing a snapshot of the old and new DOM states, the browser automatically cross-fades differences and morphs matching elements between their old and new positions.

---

Chapter 180: The View Transitions Concept

View transitions operate by calling a JavaScript API (document.startViewTransition()), which triggers a sequence where the browser captures screenshots of the elements, updates the DOM, and runs transitions.

✦ The View Transition Lifecycle

When a transition begins, the browser creates a temporary tree of pseudo-elements:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

By default, the entire page (root) fades from the old look to the new look.

---

Chapter 181: Defining Transition Names (view-transition-name)

To transition a specific element (like an image on a card morphing into a hero banner on a details page), you must uniquely identify that element in CSS using the view-transition-name property.

★ Linking Elements Across States

The name can be any custom string, but it must be unique on the page:

/* Card Thumbnail element */
.card-thumbnail {
  view-transition-name: selected-movie-poster;
}

/* Detail Page Banner element */
.detail-banner {
  view-transition-name: selected-movie-poster; /* Must match name to morph */
}

When the state changes, the browser detects matching view-transition-name properties and morphs the thumbnail scale and position directly into the detail banner location.

---

Chapter 182: Customizing Transition Styles (::view-transition-group)

You can override default browser transitions by targeting the transition pseudo-elements in your CSS.

✦ Targeting the Old and New Snapshots

Customize the durations or easing curves of the transition group:

/* Set a slower morph animation duration for our poster */
::view-transition-group(selected-movie-poster) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Customize the cross-fade animation */
::view-transition-old(selected-movie-poster) {
  animation: fade-out 0.3s forwards;
}
::view-transition-new(selected-movie-poster) {
  animation: fade-in 0.3s backwards;
}

★ Preventing Page Scroll Jumps during Transitions

To prevent layout shifts or container clipping, ensure viewport transitions are set to contain height:

::view-transition-group(root) {
  animation-duration: 0.25s;
}

---

Chapter 183: View Transitions Practice & Self-Check

✦ Practice Exercises

1. Exercise 1: Dynamic Card Morph: Create two layout classes for a profile widget: .widget-compact and .widget-expanded. Apply view-transition-name to the profile image, and toggle the classes with JavaScript inside document.startViewTransition() to see the image animate smoothly.

★ Self-Check Questions

1. What JavaScript call starts a native view transition?
   • Answer: document.startViewTransition().
2. Which CSS property links elements between different states?
   • Answer: view-transition-name.
3. Can multiple elements on the same screen share the same view-transition-name?
   • Answer: No, each view-transition-name must be unique on the current DOM page at any given time.
4. What is the root container of all view transition pseudo-elements?
   • Answer: ::view-transition.
5. Which pseudo-element represents the screenshot of the pre-transition state?
   • Answer: ::view-transition-old(name).
6. Which pseudo-element represents the screenshot of the post-transition state?
   • Answer: ::view-transition-new(name).
7. What is the default animation for view transitions?
   • Answer: A cross-fade (dissolve) of the root page content.
8. Can view transitions be used on Multi-Page Applications (MPAs)?
   • Answer: Yes, chrome and modern browsers support cross-document view transitions using @view-transition { navigation: auto; }.
9. What CSS animation property controls transition timings of view transition groups?
   • Answer: animation-duration and animation-timing-function styled on ::view-transition-group.
10. Is it possible to disable view transitions for users who request reduced motion?
    • Answer: Yes, wrap the transition rules in a @media (prefers-reduced-motion: reduce) block and set animation durations or names to none or 0s.