How to Configure Strict CSS View-Transition-Old and New Translate Transformations in Google Chrome

Directional screen sliding transitions—such as moving forward or backward through multi-step onboarding funnels—require precise spatial coordination between outgoing and incoming views. With Google Chrome’s native View Transition API, applying CSS translation transforms directly to ::view-transition-old and ::view-transition-new ensures smooth, hardware-accelerated horizontal or vertical slide transitions without modifying layout bounds or triggering CPU-bound reflows.

Chromium View Transition Coordinate Space

Both pseudo-elements inhabit an isolated view-transition layer pinned to the viewport bounds. When implementing a directional push, the departing snapshot must slide off-canvas while the arriving snapshot enters from the opposite threshold. Synchronising these displacement curves prevents visual overlap or momentary blank viewport flashes.

Authoring Synchronised Slide Keyframes in CSS

Configure forward navigation slide keyframes with unified easing curves:

::view-transition-old(slide-page) {
  animation: 320ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both slideOutLeft;
}

::view-transition-new(slide-page) {
  animation: 320ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both slideInRight;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0.8;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Preventing Horizontal Viewport Scroll Bleed

When translating snapshots completely off-screen, ensure the document root does not expose temporary horizontal scrollbars during animation:

html {
  overflow-x: clip;
}

::view-transition-group(slide-page) {
  overflow: clip;
}

DevTools Performance Audit

Open Chrome DevTools and run a Performance recording during navigation. Confirm that compositor thread activity remains unblocked and GPU raster memory remains stable across consecutive slide cycles.