Shake on Error

Add the .shake class to any element to trigger a horizontal shake animation. Remove and re-add the class to replay. Perfect for form validation error feedback.

.shake {
  animation: shakeAnim 0.5s ease;
}
@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}