셰이크

Shake

요소가 좌우로 짧게 여러 번 흔들리는 애니메이션. 잘못된 입력이나 실패한 동작에 대한 즉각적인 피드백으로 씁니다.

다른 이름: 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);

translateX를 짧은 주기로 양쪽으로 왕복시키는 keyframes입니다. 진폭(이동 거리)은 4~10px 정도로 작게, 전체 지속시간은 0.3~0.5초로 짧게 잡아야 "경고"로 읽히지 "고장"으로 읽히지 않습니다.

로그인 폼의 잘못된 비밀번호, 결제 실패, 필수 필드 미입력처럼 사용자의 동작이 거부됐음을 알릴 때 씁니다. 흔들림만으로는 "왜" 실패했는지 알 수 없으니 명확한 에러 메시지와 반드시 함께 보여주세요.

언제 쓰나

한 번만 재생하고 멈추세요(무한 반복 금지). 에러 상태가 계속되는 동안 계속 흔들리면 짜증만 유발합니다.