Motion Lexicon
中文
Interactive entry

Mass

Mass helps keep velocity, weight, and interruptibility in motion responses.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Mass helps keep velocity, weight, and interruptibility in motion responses.

How heavy the animated element feels. More mass makes it slower and more sluggish

Browse categories
Preview
Mass
420ms
28px
0ms
spring
.motion-card {
  animation-name: motion-mass;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-mass {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-mass-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-mass-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Mass for a UI fragment: Mass helps keep velocity, weight, and interruptibility in motion responses. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 0ms delay, use spring easing (cubic-bezier(0.32, 0.72, 0, 1)), and include a reduced-motion fallback.

intent: entrancefeel: softcontext: card
Usage
  • Use it when you need to keep velocity, weight, and interruptibility in motion responses.
  • Good for low- or medium-frequency UI changes that should stay short, clear, and interruptible.
  • Copy the prompt or CSS and hand it to an agent for implementation.
Examples
  • Preview Mass on a card, list item, or lightweight panel.
  • Tune duration, travel, delay, and curve until Mass matches the surrounding interface.
Review notes
  • Prefer transform and opacity so motion stays off layout and paint work.
  • Keep UI motion under 300ms; frequent feedback should be shorter.
  • Avoid scale(0) and UI ease-in; use a physical starting point and a strong ease-out curve.
Reduced motion

Under reduced motion, Mass removes travel, rotation, or looping and keeps a short fade or state comparison.