Shake Animation

쉬움

좌우로 흔들리는 애니메이션 효과

#animation#shake#alert

라이브 데모

🔔

코드

ShakeAnimation.tsx

export const ShakeAnimation = () => {
  return (
    <div className="shake-animation visible">
      <div className="shake-box">🔔</div>
    </div>
  );
};

animations.css

.shake-box {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}