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

Hiệu ứng Bounce In Up

Hiệu ứng Bounce In Up làm phần tử xuất hiện từ dưới lên với hiệu ứng nảy lști tự nhiên - giống như một quả bóng rơi xuống và nảy lại.

Keyframes chi tiết

@keyframes bounceInUp {
  0% {
    transform: translateY(2000px);
    opacity: 0;
  }
  60% {
    transform: translateY(-30px); /* Vượt quá vị trí cuối một chút */
    opacity: 1;
  }
  80% {
    transform: translateY(10px); /* Nảy ngược lại nhẹ */
  }
  100% {
    transform: translateY(0); /* Về vị trí gốc */
    opacity: 1;
  }
}

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 bounceInUp {
      0% { transform: translateY(2000px); opacity: 0; }
      60% { transform: translateY(-30px); opacity: 1; }
      80% { transform: translateY(10px); }
      100% { transform: translateY(0); }
    }
    .bounceInUp { animation-name: bounceInUp; }
  </style>
</head>
<body>
  <div class="animated bounceInUp"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Ứng dụng thực tế

• Hiệu ứng xuất hiện cho modal, toast notification
• Animation cho các card khi load trang
• Kết hợp animation-delay cho hiệu ứng dàn trang (stagger)

Tùy chỉnh

Điều chỉnh cường độ nảy bằng cách thay đổi giá trị translateY ở 60% và 80%. Giá trị âm lớn hơn = nảy cao hơn.