Playground

Translate

Combine translation, scale, rotation, skew, perspective, and transform origin.

Preview

Live preview

Move an element along the X or Y axis.

Translate

Authoritative vocabulary

Definition and close-term distinctions

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

Canonical termtranslate

Translate

位移

Authoritative definition

Move an element along the X or Y axis.

Chinese translation

沿 X 轴或 Y 轴移动元素。

Browse all 91 terms

Design contract

Decide before this motion ships

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

Purpose

Compare translation, scale, rotation, skew, perspective, and transform origin in one controlled playground.

Frequency

Use during implementation tuning; production UI keeps only transforms that explain the state relationship.

Trigger

Trigger from mode selection or state change, emphasizing one primary transform dimension at a time.

Enter / exit

Enter from an explainable offset toward none; exit in a direction with spatial meaning.

Interruptibility

Continue from the current transform matrix when switching modes to avoid decomposition jumps.

Gesture and keyboard

Map drag experiments directly to pointer travel, with keyboard steps for scale and rotation controls.

Reduced-motion strategy

Remove large translation, rotation, and perspective, keeping a state-color change or short fade.

Output

Copy into your interface

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

motion.css

.motion-demo.motion-demo--translate {
  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--translate *, .motion-demo.motion-demo--translate *::before, .motion-demo.motion-demo--translate *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--translate .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--translate .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

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

.motion-demo.motion-demo--translate .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--translate .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

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

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

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

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

.motion-demo.motion-demo--translate .motion-replay-button,
.motion-demo.motion-demo--translate .motion-undo-button,
.motion-demo.motion-demo--translate .motion-dismiss-button,
.motion-demo.motion-demo--translate .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--translate .motion-replay-button:focus-visible,
.motion-demo.motion-demo--translate .motion-undo-button:focus-visible,
.motion-demo.motion-demo--translate .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--translate .motion-pause-button:focus-visible,
.motion-demo.motion-demo--translate [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--translate [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--translate .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--translate .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--translate .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--translate .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--translate .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--translate .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--translate .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--translate .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--translate svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--translate .motion-surface { transform-origin: center; animation: motion-translate 280ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes motion-translate { from { opacity: 0.6; transform: translateX(36px); } to { opacity: 1; transform: none; } }

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

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

.force-reduced-motion .motion-demo.motion-demo--translate *,
.force-reduced-motion .motion-demo.motion-demo--translate *::before,
.force-reduced-motion .motion-demo.motion-demo--translate *::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--translate .motion-button,
.force-reduced-motion .motion-demo.motion-demo--translate [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--translate [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--translate [data-spring-target] {
  transform: none !important;
}

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

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

  .motion-demo.motion-demo--translate *, .motion-demo.motion-demo--translate *::before, .motion-demo.motion-demo--translate *::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--translate .motion-button,
  .motion-demo.motion-demo--translate [data-reorder-item],
  .motion-demo.motion-demo--translate [data-swipe-target],
  .motion-demo.motion-demo--translate [data-spring-target] {
    transform: none !important;
  }

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

Review notes

Pre-delivery review

Confirm transforms preserve document flow and hit-area semantics.
Verify that transform-origin is visibly meaningful in scale and rotation modes.

Accessibility

Keep information accessible

Reduced motion

Remove large translation, rotation, and perspective, keeping a state-color change or short fade.

Parameters

Parameter reference

Parameter	Range / options	Default	Purpose
`duration`	80ms–1200ms	280ms	Controls the time required for one motion cycle.
`transform`	Translate / Scale / Rotate / Skew / Perspective	Translate	Selects transform.
`distance`	0px–120px	36px	Controls how far the element travels.
`angle`	-45deg–45deg	12deg	Adjusts angle.
`scale`	70%–105%	92%	Controls the starting size relative to the final state.
`origin`	Center / Top / Bottom / Left / Right	Center	Selects origin.
`ease`	Soft / Snap / Calm / Linear	Soft	Controls how velocity changes over time.

Live preview

Definition and close-term distinctions

Translate

Scale

Rotate

Skew

Perspective

Transform origin

Decide before this motion ships

Copy into your interface

Pre-delivery review

Keep information accessible

Parameter reference

Keep exploring