How to Configure Strict CSS View-Transition-Types in Google Chrome

Modern single-page applications and multi-page web navigations rely heavily on fluid spatial transitions—such as sliding forwards on forward navigation and sliding backwards on back button clicks. In the original View Transitions API, applying conditional directional animations required dynamically adding and removing clumsy CSS class names on the root document element before invoking document.startViewTransition(). In Google Chrome, the updated specification introduces view-transition-types, allowing authors to pass typed transition descriptors that activate specialized CSS animation rules declaratively.

Understanding View Transition Types

When initiating a view transition in JavaScript, developers can pass an options object containing an array of custom transition type tokens:

// Trigger transition with directional type descriptor
document.startViewTransition({
  update: updateDOMCallback,
  types: ['slide-forward', 'navigation-flow']
});

During the transition lifecycle, the browser automatically applies the pseudo-class selector :active-view-transition-type(<type>) to the ::view-transition root pseudo-element. This allows stylesheets to target specific navigation directions cleanly without modifying document DOM classes.

Configuring Strict Directional Animations in CSS

To style forward and backward page transitions using strict transition types:

/* Forward slide animation rules */
html:active-view-transition-type(slide-forward)::view-transition-old(root) {
  animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-left;
}

html:active-view-transition-type(slide-forward)::view-transition-new(root) {
  animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-right;
}

/* Backward slide animation rules */
html:active-view-transition-type(slide-backward)::view-transition-old(root) {
  animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-right;
}

html:active-view-transition-type(slide-backward)::view-transition-new(root) {
  animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-left;
}

@keyframes slide-out-to-left {
  to { transform: translateX(-100%); }
}

@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
}

@keyframes slide-out-to-right {
  to { transform: translateX(100%); }
}

@keyframes slide-in-from-left {
  from { transform: translateX(-100%); }
}

This declarative architecture completely separates animation choreography from JavaScript routing logic, ensuring maintainable and fluid page transitions.

Auditing View Transition Types in Chrome DevTools

Google Chrome provides specialized DevTools tooling to audit view transition animations:

1. Open DevTools (F12) and navigate to the Animations drawer panel (via More Tools > Animations).
2. Trigger a view transition on the web application. Chrome captures the view transition snapshot.
3. Slow down animation speed to 10% or pause the timeline to scrub through old and new view transition pseudo-elements.
4. In the Elements panel, inspect ::view-transition to verify that :active-view-transition-type evaluates accurately during the active animation phase.