Motion Lexicon
Search/
中文
System
Motion component

Scale in

Scale from near the final size, with an optional slight overshoot for Pop in.

Preview

Live preview

Element grows from smaller to full size as it appears, often paired with a fade.

Preview
Scale in
Authoritative vocabulary

Definition and close-term distinctions

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

Canonical termscale-in

Scale in

缩放入场
Authoritative definition

Element grows from smaller to full size as it appears, often paired with a fade.

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

Establish overlays, badges, or compact states from a size close to their final form.

Frequency

Suitable for medium-frequency appearances; keep frequent control feedback above a 96% start scale.

Trigger

Trigger on overlay opening, state confirmation, or compact object mounting, with origin near the trigger.

Enter / exit

Enter from 88–96% with a fade; exit with a slight shrink and fade, keeping scale above zero.

Interruptibility

Use the current scale as the next starting point when retriggered.

Gesture and keyboard

This pattern is state-triggered; use Press / Tap feedback for direct press response.

Reduced-motion strategy

Hold the final size and communicate appearance through an 80–120ms opacity change.

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

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

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

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

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

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

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

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

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

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

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

.motion-demo.motion-demo--scale-in .motion-surface { animation: motion-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) 0ms both; transform-origin: var(--motion-transform-origin, center); }
@keyframes motion-scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

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

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

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

.force-reduced-motion .motion-demo.motion-demo--scale-in .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--scale-in .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--scale-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--scale-in {
    animation: motion-scale-in-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

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

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

Pre-delivery review

  • Verify that transform-origin matches the trigger source.
  • Limit text scaling to avoid glyph shimmer or blur.
Accessibility

Keep information accessible

Reduced motion

Hold the final size and communicate appearance through an 80–120ms opacity change.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms200msControls the time required for one motion cycle.
scale70%–105%92%Controls the starting size relative to the final state.
overshootOn / OffOffBriefly exceeds the final size before settling.
delay0ms–600ms0msControls the wait before motion begins.
easeSoft / Snap / Calm / LinearSnapControls how velocity changes over time.
Related entries
Fade in / Fade outSlide inReveal