Hiệu ứng Fade Out Right Big (Mờ dần ra phải xa) với CSS

Hiệu ứng Fade Out Right Big

Hiệu ứng Fade Out Right Big là phiên bản "xa" của fadeOutRight - phần tử mờ dần và di chuyển **xa hơn nhiều** (2000px) ra khỏi màn hình bên phải.

Keyframes

@keyframes fadeOutRightBig {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(2000px); /* Di chuyển rất xa ra phải */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

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

So sánh Fade Out Right vs Right Big