Hiệu ứng Bounce Out Left (Nảy ra bên trái) với CSS

Hiệu ứng Bounce Out Left

Hiệu ứng Bounce Out Left làm cho phần tử nảy ra khỏi màn hình về phía bên trái với độ mờ dần giảm đến 0. Đây là một trong các hiệu ứng animation phổ biến từ thư viện Animate.css.

Cấu trúc Keyframes

@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(20px); /* Nảy nhẹ sang phải trước */
    opacity: 1;
  }
  100% {
    transform: translateX(-2000px); /* Bay ra khỏi màn hình bên trái */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      animation-duration: 2s; /* Rút gọn từ 10s để demo nhanh */
      animation-fill-mode: both;
    }
    @keyframes bounceOutLeft {
      0% { transform: translateX(0); opacity: 1; }
      20% { transform: translateX(20px); opacity: 1; }
      100% { transform: translateX(-2000px); opacity: 0; }
    }
    .bounceOutLeft { animation-name: bounceOutLeft; }
  </style>
</head>
<body>
  <div id="animated-example" class="animated bounceOutLeft"></div>
  <button onclick="location.reload()">Chạy lại animation</button>
</body>
</html>

Các hiệu ứng Bounce khác

• bounceOutRight - Nảy ra bên phải
• bounceOutUp - Nảy ra lên trên
• bounceOutDown - Nảy ra xuống dưới
• bounceOut - Nảy thu nhỏ và biến mất

Mẹo sử dụng

Kết hợp với animation-delay để tạo chuỗi hiệu ứng cho nhiều phần tử, hoặc dùng JavaScript thêm class khi cuộn trang (scroll trigger).