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

Hiệu ứng Bounce In Left

Hiệu ứng Bounce In Left làm phần tử xuất hiện từ bên trái màn hình, nảy lști sang phải đến vị trí gốc. Đối xứng với bounceInRight.

Keyframes

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

Ví dụ hoàn chỉnh

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

Ứng dụng

• Sidebar/menu trượt vào từ trái
• Các phần tử danh sách xuất hiện lần lượt
• Kết hợp với IntersectionObserver để trigger khi cuộn vào viewport