Hiệu ứng Bounce Out (Nảy thu nhỏ biến mất) với CSS

Hiệu ứng Bounce Out

Hiệu ứng Bounce Out làm phần tử nảy theo tỷ lệ (scale) - co giãn rồi thu nhỏ dần và biến mất. Khác với các hiệu ứng bounce dịch chuyển (translate), hiệu ứng này dùng transform: scale().

Keyframes chi tiết

@keyframes bounceOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(0.95); /* Co nhẹ */
  }
  50% {
    transform: scale(1.1); /* Nảy to ra */
    opacity: 1;
  }
  100% {
    transform: scale(0.3); /* Thu nhỏ dần */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #9C27B0;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes bounceOut {
      0% { transform: scale(1); opacity: 1; }
      25% { transform: scale(0.95); }
      50% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(0.3); opacity: 0; }
    }
    .bounceOut { animation-name: bounceOut; }
  </style>
</head>
<body>
  <div class="animated bounceOut"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Khi nào nên dùng

• Xóa mục khỏi danh sách (todo list, cart)
• Đóng modal, popup
• Hiệu ứng "like" hoặc "favorite" bị bỏ chọn