Motion Lexicon
Search/
中文
System
Motion component

Slide in

Bring content in from a clear direction so its spatial relationship stays legible.

Preview

Live preview

Element enters by sliding in from off-screen (left, right, top, or bottom).

Preview
Slide in
Authoritative vocabulary

Definition and close-term distinctions

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

Canonical termslide-in

Slide in

滑入
Authoritative definition

Element enters by sliding in from off-screen (left, right, top, or bottom).

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

Use direction to explain where content came from and how it relates spatially to the current layout.

Frequency

Use for low- to medium-frequency drawers, panels, and layered navigation; prefer shorter fades for frequent feedback.

Trigger

Trigger when opening a panel, adding content, or entering deeper navigation, with direction matching the source.

Enter / exit

Enter from the source direction; exit along the reverse path with a clear destination.

Interruptibility

A reversing action takes over at the current position and changes direction immediately.

Gesture and keyboard

Gesture-driven panels follow the pointer and settle after a threshold; button-opened panels keep click and keyboard parity.

Reduced-motion strategy

Remove large travel and keep a short fade with a clear layer boundary.

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

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

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

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

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

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

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

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

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

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

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

.motion-demo.motion-demo--slide-in .motion-surface { animation: motion-slide-in 240ms cubic-bezier(0.23, 1, 0.32, 1) 0ms both; will-change: transform, opacity; }
@keyframes motion-slide-in {
  from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; }
}

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

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

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

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

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

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

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

Pre-delivery review

  • Check that the entry direction matches the trigger's position.
  • Return focus to a sensible location after exit completes.
Accessibility

Keep information accessible

Reduced motion

Remove large travel and keep a short fade with a clear layer boundary.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms240msControls the time required for one motion cycle.
distance0px–120px28pxControls how far the element travels.
directionUp / Down / Left / Right / ExitUpSelects direction.
delay0ms–600ms0msControls the wait before motion begins.
easeSoft / Snap / Calm / LinearSoftControls how velocity changes over time.
Related entries
Fade in / Fade outScale inReveal