Hiệu ứng Roll In (Cuốn vào) với CSS

Hiệu ứng Roll In

Hiệu ứng Roll In làm phần tử **cuốn vào từ bên trái** - xoay từ -120 độ về 0 độ đồng thời trượt từ -100% về 0. Ngược lại với rollOut.

Keyframes

@keyframes rollIn {
  0% {
    transform: translateX(-100%) rotate(-120deg); /* Bắt đầu từ trái, xoay ngược */
    opacity: 0;
  }
  100% {
    transform: translateX(0px) rotate(0deg);      /* Về vị trí gốc, thẳng đứng */
    opacity: 1;
  }
}

Ví dụ hoàn chỉnh

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

Ứng dụng

• Các item danh sách xuất hiện lần lượt (stagger)
• Loading indicator dạng quả bóng cuốn
• Game: nhân vật xuất hiện kiểu cuốn lăn

Mẹo Stagger (Dàn trang)

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
/* Hoặc dùng CSS custom property */
.item {
  --delay: calc(var(--index) * 0.1s);
  animation-delay: var(--delay);
}
/* HTML: <div class="item" style="--index: 1">... */