Hiệu ứng Bounce In Down (Nảy vào từ trên) với CSS

Hiệu ứng Bounce In Down

Hiệu ứng Bounce In Down làm phần tử xuất hiện từ trên rơi xuống, nảy lști ở vị trí đích. Đối xứng với bounceOutDown.

Keyframes

@keyframes bounceInDown {
  0% {
    transform: translateY(-2000px);
    opacity: 0;
  }
  60% {
    transform: translateY(30px); /* Vượt quá vị trí gốc xuống dưới */
    opacity: 1;
  }
  80% {
    transform: translateY(-10px); /* Nảy ngược lên nhẹ */
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

Lưu ý về code gốc

Code gốc có lỗi typo: - webkit-animation-name (có khoảng trắng sau dấu gạch ngang). Đã sửa trong ví dụ trên.