Motion Lexicon
Search/
中文
System
Motion component

Page transition

Preserve continuity across page or view changes with a safe fallback.

Preview

Live preview

An animation that plays when navigating from one page or route to another.

Preview
Previous
Page transition
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termpage-transition

Page transition

页面过渡
Authoritative definition

An animation that plays when navigating from one page or route to another.

Chinese translation

从一个页面或路由导航到另一个页面或路由时播放的动画。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.

Purpose

Preserve context across page or route changes and explain the new page's hierarchical source.

Frequency

Use for low- to medium-frequency navigation, keeping primary task paths brief and skippable.

Trigger

Trigger after route intent is confirmed, managing data waiting separately from visual transition.

Enter / exit

Exit the old page quickly and enter the new page when interactive content is ready, preserving shared-element identity.

Interruptibility

New navigation replaces the previous target immediately, and browser back resumes from current transition state.

Gesture and keyboard

Respect platform swipe-back gestures while keeping links, keyboard, and history navigation equally reachable.

Reduced-motion strategy

Use immediate routing with a short content fade while preserving loading and focus feedback.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--page-transition {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--page-transition *, .motion-demo.motion-demo--page-transition *::before, .motion-demo.motion-demo--page-transition *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--page-transition .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--page-transition .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--page-transition .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--page-transition .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--page-transition .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--page-transition .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--page-transition .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--page-transition .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--page-transition button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--page-transition .motion-replay-button,
.motion-demo.motion-demo--page-transition .motion-undo-button,
.motion-demo.motion-demo--page-transition .motion-dismiss-button,
.motion-demo.motion-demo--page-transition .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--page-transition .motion-replay-button:focus-visible,
.motion-demo.motion-demo--page-transition .motion-undo-button:focus-visible,
.motion-demo.motion-demo--page-transition .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--page-transition .motion-pause-button:focus-visible,
.motion-demo.motion-demo--page-transition [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--page-transition [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--page-transition .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--page-transition .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--page-transition .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--page-transition .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--page-transition .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--page-transition .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--page-transition .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--page-transition .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--page-transition svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--page-transition .motion-state--from { animation: motion-page-transition-out 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.motion-demo.motion-demo--page-transition .motion-state--to { animation: motion-page-transition-in 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
::view-transition-old(root) { animation: motion-page-transition-out 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
::view-transition-new(root) { animation: motion-page-transition-in 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes motion-page-transition-out { to { opacity: 0; transform: translateX(32px); } }
@keyframes motion-page-transition-in { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }

@keyframes motion-page-transition-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--page-transition {
  animation: motion-page-transition-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--page-transition *,
.force-reduced-motion .motion-demo.motion-demo--page-transition *::before,
.force-reduced-motion .motion-demo.motion-demo--page-transition *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--page-transition .motion-button,
.force-reduced-motion .motion-demo.motion-demo--page-transition [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--page-transition [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--page-transition [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--page-transition .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--page-transition .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--page-transition .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--page-transition {
    animation: motion-page-transition-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--page-transition *, .motion-demo.motion-demo--page-transition *::before, .motion-demo.motion-demo--page-transition *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--page-transition .motion-button,
  .motion-demo.motion-demo--page-transition [data-reorder-item],
  .motion-demo.motion-demo--page-transition [data-swipe-target],
  .motion-demo.motion-demo--page-transition [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--page-transition .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--page-transition .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--page-transition .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
Review notes

Pre-delivery review

  • Do not let transition overlays delay link response.
  • Verify forward, back, refresh, and deep-link paths.
Accessibility

Keep information accessible

Reduced motion

Use immediate routing with a short content fade while preserving loading and focus feedback.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms280msControls the time required for one motion cycle.
distance0px–120px32pxControls how far the element travels.
directionUp / Down / Left / Right / ExitLeftSelects direction.
easeSoft / Snap / Calm / LinearSoftControls how velocity changes over time.
Related entries
Scroll revealScroll-driven animationParallax