Hiệu ứng Bounce In Right (Nảy vào từ phải) với CSS

Hiệu ứng Bounce In Right

Hiệu ứng Bounce In Right làm phần tử xuất hiện từ bên phải màn hình, nảy lști về vị trí gốc - hiệu ứng "vào trang" rất tự nhiên và thu hút.

Keyframes

@keyframes bounceInRight {
  0% {
    transform: translateX(2000px);
    opacity: 0;
  }
  60% {
    transform: translateX(-30px); /* Vượt qua vị trí gốc sang trái */
    opacity: 1;
  }
  80% {
    transform: translateX(10px); /* Nảy ngược nhẹ */
  }
  100% {
    transform: translateX(0); /* Về vị trí chính xác */
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #FF9800;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes bounceInRight {
      0% { transform: translateX(2000px); opacity: 0; }
      60% { transform: translateX(-30px); opacity: 1; }
      80% { transform: translateX(10px); }
      100% { transform: translateX(0); }
    }
    .bounceInRight { animation-name: bounceInRight; }
  </style>
</head>
<body>
  <div class="animated bounceInRight"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Mẹo tạo hiệu ứng dàn trang (Stagger)

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
/* ... */

Áp dụng cho danh sách card, menu item, gallery để tạo hiệu ứng chuyên nghiệp.