Motion Lexicon
中文
Interactive entry

Origin-aware animation

Origin-aware animation helps express space, depth, and object state changes.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Origin-aware animation helps express space, depth, and object state changes.

An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS

Browse categories
Preview
Origin-aware animation
420ms
34px
0ms
soft
.motion-card {
  animation-name: motion-origin-aware-animation;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-origin-aware-animation {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(-4deg) scale(0.96);
  }

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

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

@keyframes motion-origin-aware-animation-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Origin-aware animation for a UI fragment: Origin-aware animation helps express space, depth, and object state changes. Animate transform and opacity, keep the duration at 420ms, use 34px of visual amplitude, add a 0ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.

intent: entrancefeel: softcontext: card
Usage
  • Use it when you need to express space, depth, and object state changes.
  • 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 Origin-aware animation on a card, list item, or lightweight panel.
  • Tune duration, travel, delay, and curve until Origin-aware animation 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, Origin-aware animation removes travel, rotation, or looping and keeps a short fade or state comparison.