Anticipation

애니티시페이션

A small wind-up in the opposite direction before the main move — like a golf swing's backswing, it tells the viewer what's about to happen before it happens.

Also known as: Anticipation (12 principles)Wind-up

···

html

<div class="lane"><i class="ball"></i><i class="goal"></i></div>

css

.lane{position:relative;width:min(80%,420px);height:40px}
.goal{position:absolute;right:6px;top:50%;width:2px;height:34px;margin-top:-17px;background:var(--line)}
.ball{position:absolute;left:6px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--accent);
  animation:launch 2.2s cubic-bezier(.3,0,.2,1) infinite}
@keyframes launch{
  0%{left:6px}
  18%{left:6px}
  30%{left:-12px}
  46%{left:calc(100% - 40px)}
  60%{left:calc(100% - 46px)}
  70%{left:calc(100% - 32px)}
  100%{left:calc(100% - 32px)}
}

One of Disney's 12 principles — without it, motion feels abrupt and mechanical. A button that dips slightly before it "fires," or a character bending its knees before jumping, are both anticipation.

In UI it should stay very short (tens of ms up to about 100ms) — too long and the response feels sluggish. The key is that it moves opposite and smaller than the main action.

When to use

Save it for the one button press or character move you want to emphasize. Add it to every interaction and the whole UI starts to feel slow.