Hiệu ứng Bounce Out Down (Nảy ra xuống) với CSS

Hiệu ứng Bounce Out Down

Hiệu ứng Bounce Out Down làm phần tử nảy nhẹ lên trên rồi rơi xuống khỏi màn hình bên dưới, độ mờ giảm dần đến 0.

Keyframes

@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(-20px); /* Nảy nhẹ lên trước */
    opacity: 1;
  }
  100% {
    transform: translateY(2000px); /* Rơi xuống khỏi màn hình */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

So sánh với Bounce In Down

bounceOutDown là ngược lại của bounceInDown - dùng cho hiệu ứng ẩn/mất đi, trong khi bounceInDown dùng cho hiệu ứng xuất hiện.