Hiệu ứng Fade Out Up Big (Mờ dần lên rất xa) với CSS

Hiệu ứng Fade Out Up Big

Hiệu ứng Fade Out Up Big là phiên bản "xa" của fadeOutUp - phần tử mờ dần và bay **xa lên trên** (2000px) ra khỏi màn hình.

Keyframes

@keyframes fadeOutUpBig {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-2000px); /* Bay rất xa lên trên */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

So sánh Fade Out Up vs Up Big