Slide Left-to-Right Page Transition

Anatomy of a Slide Transition

A slide transition is two coordinated animations on the snapshot pseudo-elements: the old snapshot translates out, and the new snapshot translates in from the opposite side.

.page {
  view-transition-name: page;
}
@keyframes slide-out-left {
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slide-in-right {
  from { transform: translateX(30%); opacity: 0; }
}
::view-transition-old(page) {
  animation: 400ms ease-out both slide-out-left;
}
::view-transition-new(page) {
  animation: 400ms ease-out both slide-in-right;
}

Why translate to 30% and not 100%?

Translating fully off-screen (100%) creates a hard "card swap" feel that competes with native iOS/Android navigation animations. A partial translate to ±30% combined with an opacity fade reads as a softer transition and matches the feel of modern web apps like Vercel's dashboard or Linear's issue navigation.

Direction reversal for back navigation

For back-button navigation you want the opposite direction. Track the navigation direction in your router state and conditionally apply a different animation:

const direction = back ? 'back' : 'forward';
document.documentElement.dataset.navDirection = direction;

[data-nav-direction="back"] ::view-transition-old(page) {
  animation-name: slide-out-right;
}

This pattern keeps your CSS declarative and pushes the only piece of logic — direction — into a single data attribute.