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

Hiệu ứng Bounce Out Up

Hiệu ứng Bounce Out Up làm phần tử nảy nhẹ xuống dưới rồi bay lên trên khỏi màn hình, mờ dần biến mất. Ngược lại với bounceInDown.

Keyframes

@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(20px); /* Nảy nhẹ xuống trước */
    opacity: 1;
  }
  100% {
    transform: translateY(-2000px); /* Bay lên trên 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: #3F51B5;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes bounceOutUp {
      0% { transform: translateY(0); opacity: 1; }
      20% { transform: translateY(20px); opacity: 1; }
      100% { transform: translateY(-2000px); opacity: 0; }
    }
    .bounceOutUp { animation-name: bounceOutUp; }
  </style>
</head>
<body>
  <div class="animated bounceOutUp"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Mẹo: Tùy chỉnh độ "nảy"

Thay đổi giá trị 20px ở 20% để điều chỉnh cường độ nảy. Giá trị lớn hơn = nảy mạnh hơn trước khi bay đi.