Hiệu ứng Roll Out (Cuốn ra) với CSS

Hiệu ứng Roll Out

Hiệu ứng Roll Out làm phần tử **xoay và trượt ra khỏi màn hình** cùng lúc - kết hợp translateX và rotate. Giống như một quả bóng cuốn ra ngoài.

Keyframes

@keyframes rollOut {
  0% {
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) rotate(120deg); /* Cuốn ra phải + xoay 120 độ */
    opacity: 0;
  }
}

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      width: 100px; height: 100px;
      background: #795548;
      border-radius: 50%; /* Hình tròn nhìn rõ hiệu ứng cuốn */
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    @keyframes rollOut {
      0% { transform: translateX(0px) rotate(0deg); opacity: 1; }
      100% { transform: translateX(100%) rotate(120deg); opacity: 0; }
    }
    .rollOut { animation-name: rollOut; }
  </style>
</head>
<body>
  <div class="animated rollOut"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

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

Code gốc có thẻ <style> đóng lặp 2 lần và thiếu </html>. Đã sửa trong ví dụ trên.

Biến thể Roll

• rollIn - Cuốn vào từ trái (xem bài ID 1003062474)
• Tùy chỉnh: translateX(-100%) cho cuốn trái, rotate(-120deg) cho xoay ngược
• Kết hợp scale() để co nhỏ khi cuốn