Hiệu ứng Shake (Rung lắc) với CSS

Hiệu ứng Shake

Hiệu ứng Shake làm phần tử **rung lắc ngang** (translateX) qua lại giữa -10px và 10px. Thường dùng cho: form validation error, notification cảnh báo, "wrong password" feedback.

Keyframes

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } /* Sang trái */
  20%, 40%, 60%, 80% { transform: translateX(10px); }       /* Sang phải */
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #F44336;
      animation-duration: 0.8s;  /* Nhanh hơn cho cảm giác rung */
      animation-fill-mode: both;
      animation-timing-function: ease-in-out;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }
    .shake { animation-name: shake; }
  </style>
</head>
<body>
  <div class="animated shake"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Các biến thể Shake

Ví dụ Shake 3D (Rotate)

@keyframes shake-3d {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
  20%, 40%, 60%, 80% { transform: rotate(5deg); }
}
.shake-3d { animation: shake-3d 0.6s ease-in-out; }

Tích hợp JavaScript (Form validation)

function shakeElement(element) {
  element.classList.add('shake');
  element.addEventListener('animationend', () => {
    element.classList.remove('shake');
  }, { once: true });
}

// Sử dụng
const input = document.querySelector('input');
input.addEventListener('invalid', (e) => {
  e.preventDefault();
  shakeElement(input);
});

Mẹo hiệu năng

• Dùng transform: translateX() - GPU accelerated, không trigger layout
• Thêm will-change: transform cho element hay shake
• Duration ngắn (0.5-1s) - tránh gây chóng mặt
• Tuân thủ prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}