Interactive entry

Fill mode

Fill mode helps turn several changes into a readable rhythm.

Entrances & exits Sequencing & timing Movement & transforms State transitions

ready

Active entry

Preview, parameters, and exports

Fill mode helps turn several changes into a readable rhythm.

Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards)

Browse categories

Fill mode

Duration420ms

Distance28px

Delay80ms

Curvesoft

.motion-card {
  animation-name: motion-fill-mode;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 80ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-fill-mode {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

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

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

  to {
    opacity: 1;
  }
}

Agent prompt

Use Fill mode for a UI fragment: Fill mode helps turn several changes into a readable rhythm. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 80ms 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 turn several changes into a readable rhythm.
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 Fill mode on a card, list item, or lightweight panel.
Tune duration, travel, delay, and curve until Fill mode 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, Fill mode removes travel, rotation, or looping and keeps a short fade or state comparison.

Related entries