Hiệu ứng Fade Out Up (Mờ dần lên trên) với CSS

Hiệu ứng Fade Out Up

Hiệu ứng Fade Out Up làm phần tử mờ dần (opacity 1→0) đồng thời di chuyển nhẹ lên trên. Hiệu ứng nhẹ nhàng, thường dùng cho exit animation.

Keyframes đơn giản

@keyframes fadeOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px); /* Di chuyển lên 20px */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

Các biến thể Fade Out

• fadeOutDown - Mờ dần xuống dưới
• fadeOutLeft - Mờ dần sang trái
• fadeOutRight - Mờ dần sang phải
• fadeOutUpBig / DownBig / LeftBig / RightBig - Di chuyển xa hơn (2000px)

Ứng dụng

Phù hợp cho: toast notification tự đóng, tooltip biến mất, loading spinner fade out, chuyển trang mượt mà.