scale-in

Scale in

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

Preview

An appearing element expands from a reduced scale to its final dimensions, commonly while opacity rises.

Scale in

Implement Scale in: Scale from near the final size, with an optional slight overshoot for Pop in. Use Duration 200ms, Start scale 92%, Subtle overshoot off, Delay 0ms, Easing snap. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--scale-in. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.

markup.html

<div class="motion-demo motion-demo--scale-in" data-motion="scale-in" aria-label="Scale in demo">
  <article class="motion-surface">
    <strong>Scale in</strong>
    <span class="motion-line"></span>
    <span class="motion-line"></span>
  </article>
</div>

motion.css

.motion-demo.motion-demo--scale-in {
  box-sizing: border-box;
  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: 16px;
  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: 16px;
  box-shadow: none;
}

.motion-demo.motion-demo--scale-in .motion-surface strong { font-weight: 500; }

.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: 999px;
  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: 8px;
  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: 16px; }
.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; }
}

Learn more

Before 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.

Accessibility

Reduced motion

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

Parameter reference

Parameter	Range / options	Default	Purpose
`duration`	80ms–1200ms	200ms	Controls the time required for one motion cycle.
`scale`	70%–105%	92%	Controls the starting size relative to the final state.
`overshoot`	On / Off	Off	Briefly exceeds the final size before settling.
`delay`	0ms–600ms	0ms	Controls the wait before motion begins.
`ease`	Soft / Snap / Calm / Linear	Snap	Controls how velocity changes over time.