Hiệu ứng Fade Down Big (Mờ dần xuống xa) với CSS

Hiệu ứng Fade Out Down Big

Lưu ý: Tiêu đề gốc "Fade Down Big" nhưng keyframes sử dụng tên fadeOutDownBig. Hiệu ứng này làm phần tử mờ dần và rơi **xa xuống dưới** (2000px) ra khỏi màn hình.

Keyframes

@keyframes fadeOutDownBig {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(2000px); /* Rơi xa xuống dưới */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

Lưu ý sửa lỗi code gốc

Code gốc có lỗi: - webkit-animation-name (khoảng trắng sai). Đã sửa thành -webkit-animation-name.

Khi nào dùng

• Xóa item khỏi danh sách (rơi xuống)
• Đóng bottom sheet, modal từ trên rơi xuống
• Hiệu ứng "thải" hoặc "remove"戏剧化