Design Atlas
한국어
↝ Motion

Holds

홀드

Deliberately freezing on a pose partway through an action so it has time to register. Motion that never pauses ends up leaving nothing memorable behind.

Also known as: Hold (animation)Held frame
···
html
<div class="rows">
  <div class="row">
    <span class="tag">No hold</span>
    <div class="track"><i class="ball nohold"></i></div>
  </div>
  <div class="row">
    <span class="tag">Hold</span>
    <div class="track"><i class="ball hold"><i class="ring"></i></i></div>
  </div>
</div>
css
.rows{position:absolute;inset:14% 6%;display:flex;flex-direction:column;justify-content:space-around}
.row{display:flex;flex-direction:column;gap:8px}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:26px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.ball{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--accent)}
.nohold{animation:noHold 2.2s ease-in-out infinite}
.hold{background:var(--accent-3);animation:withHold 2.2s ease-in-out infinite}
.ring{position:absolute;inset:-6px;border:2px solid var(--accent-2);border-radius:50%;opacity:0;animation:ringPulse 2.2s steps(1) infinite}
@keyframes noHold{0%{left:6%}50%{left:calc(94% - 22px)}100%{left:6%}}
@keyframes withHold{
  0%{left:6%}
  18%{left:calc(46% - 11px)}
  42%{left:calc(46% - 11px)}
  60%{left:calc(94% - 22px)}
  84%{left:calc(94% - 22px)}
  100%{left:6%}
}
@keyframes ringPulse{
  0%,18%{opacity:0}
  18.1%,42%{opacity:1}
  42.1%,60%{opacity:0}
  60.1%,84%{opacity:1}
  84.1%,100%{opacity:0}
}

Animation that never stops moving reads as busy and hard to follow. Animators deliberately freeze a key pose or expression for several full frames, giving the audience's eye time to catch up and register what just happened — comic timing is, in large part, built on holds.

In UI, a hold is the brief pause right after a state change. When a toggle flips or a save completes, staying put for a couple hundred milliseconds before moving on again stamps the change into the user's memory instead of blurring past it.

The top lane below never holds — it swings back and forth continuously, and it's hard to tell what deserves attention. The bottom lane clearly stops at both ends of its swing, and a ring flashes around it while it's held, marking "this is deliberately paused."

When to use

Use it to confirm a change the user just triggered — a save, a toggle flip. Keep it short, roughly 200–500ms — hold too long and the UI starts to feel unresponsive.