Shake

셰이크

An element rapidly wiggling left and right a few times — instant feedback for an invalid input or failed action.

Also known as: Shake animationError shakeWiggle

···

html

<div class="box" id="box">✕ Invalid code</div>

css

.box{padding:14px 22px;border-radius:10px;border:1.5px solid var(--accent-2);color:var(--accent-2);
  background:color-mix(in srgb, var(--accent-2) 10%, transparent);font:700 14px/1 sans-serif}
.box.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}

const box = document.getElementById('box');
function trigger() {
  box.classList.remove('shake');
  void box.offsetWidth;
  box.classList.add('shake');
}
trigger();
setInterval(trigger, 2200);

Keyframes that swing translateX back and forth on a short cycle. Keep the amplitude small (4–10px) and the whole thing brief (0.3–0.5s) — long or large and it reads as broken rather than "try again."

Used for a wrong password on a login form, a failed payment, a missing required field — anywhere the user's action was rejected. The wiggle alone doesn't say what went wrong, so always pair it with an actual error message.

When to use

Play it once and stop — never loop it. Shaking continuously while an error persists just annoys people.