Motion Lexicon
中文
Interactive entry

Idle animation

Idle animation helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Idle animation helps use continuous motion for waiting, liveliness, or ambient atmosphere.

Subtle motion that plays while an element is just sitting there, waiting to be interacted with

Browse categories
Preview
Idle animation
1200ms
28px
0ms
soft
.motion-card {
  animation-name: motion-idle-animation;
  animation-duration: 1200ms;
  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;
  animation-iteration-count: infinite;
}

@keyframes motion-idle-animation {
  from {
    opacity: 0;
    transform: translateY(0) scale(0.98);
  }

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

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

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

  to {
    opacity: 1;
  }
}

Agent prompt

Use Idle animation for a UI fragment: Idle animation helps use continuous motion for waiting, liveliness, or ambient atmosphere. Animate transform and opacity, keep the duration at 1200ms, use 28px 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 use continuous motion for waiting, liveliness, or ambient atmosphere.
  • 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 Idle animation on a card, list item, or lightweight panel.
  • Tune duration, travel, delay, and curve until Idle 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, Idle animation removes travel, rotation, or looping and keeps a short fade or state comparison.