Hiệu ứng Bounce Out Right (Nảy ra bên phải) với CSS

Hiệu ứng Bounce Out Right

Hiệu ứng Bounce Out Right làm phần tử nảy nhẹ sang trái rồi bay ra khỏi màn hình bên phải, mờ dần biến mất. Đối xứng với bounceOutLeft.

Keyframes

@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(-20px); /* Nảy nhẹ sang trái */
    opacity: 1;
  }
  100% {
    transform: translateX(2000px); /* Bay ra phải khỏi màn hình */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

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

Code gốc có lỗi: >>/div> (thừa dấu >) và </head> ở cuối thay vì </html>. Đã sửa trong ví dụ trên.