Hiệu ứng Light Speed Out (Tốc độ ánh sáng ra) với CSS

Hiệu ứng Light Speed Out

Hiệu ứng Light Speed Out làm phần tử **bay ra khỏi màn hình với tốc độ cực nhanh**, kết hợp dịch chuyển (translateX) và nghiêng (skewX) tạo cảm giác "nhảy vào không gian siêu tốc". Thời gian mặc định rất ngắn (0.25s).

Keyframes

@keyframes lightSpeedOut {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg); /* Nghiêng -30 độ khi bay */
    opacity: 0;
  }
}

/* Timing function đặc biệt */
.lightSpeedOut {
  animation-timing-function: ease-in; /* Tăng tốc dần */
  animation-duration: 0.25s;          /* Rất nhanh */
}

Ví dụ hoàn chỉnh

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

Cặp đôi: Light Speed In

Xem bài ID 1003062462 cho hiệu ứng ngược lại - Light Speed In (bay vào từ phải với skewX dương).

Ứng dụng

• Chuyển trang nhanh (page transition)
• Đóng sidebar/menu trượt
• Toast notification tự hủy nhanh
• Game: hiệu ứng teleport, warp speed

Tùy chỉnh

• Thay translateX(100%) → translateX(-100%) cho bay trái
• Điều chỉnh skewX(-30deg) góc nghiêng (âm = nghiêng ngược chiều bay)
• Kết hợp scale(0.5) cho hiệu ứng co nhỏ khi bay xa