Fill-mode backwards

Delayed entrances need fill-mode: backwards or they flash first.

From design-motion-principles, cookbook, Fill Mode for Persistence.

Three cards, staggered

Press Replay and watch cards 2 and 3.

fill-mode: noneFlashes
    animation-fill-mode: none
    fill-mode: backwardsWaits
      animation-fill-mode: backwards
      @keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
}
.card {
  animation: fade-in 300ms var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 250ms);
}

      Scrub the timeline

      Pick a fill mode, then drag through the delay.

      fill-mode: noneBefore
      Invoice sentINV-2041 to Acme Co.
      t 250msopacity 1

      Visible early: the flash.

      fill-modeDuring the delayAfter the end
      noneBase styleBase style
      forwardsBase styleLast keyframe
      backwardsFirst keyframeBase style
      bothFirst keyframeLast keyframe
       
      .toast { animation: fade-in 300ms var(--ease-out) 500ms backwards; }
.toast.leaving { animation: fade-out 200ms var(--ease-out) forwards; }

      Why it matters, pros and cons

      Why it matters

      During a delay the base style shows. backwards applies the first keyframe.

      Pros

      • One keyword removes every stagger flash
      • No base opacity: 0 to strand content
      • Same in WAAPI: fill: "backwards"

      Cons

      • Undelayed animations don't need it
      • forwards fixes exits, not entrances
      • both keeps styles that override later hover