Hiệu ứng Hinge (Cửa quay) với CSS

Hiệu ứng Hinge

Hiệu ứng Hinge mô phỏng **cánh cửa bị bung mở rồi rơi xuống** - xoay quanh góc trên-trái (top left) như một cái gờ (hinge), kết hợp nảy lști và rơi tự do. Hiệu ứng戏剧化, thời gian lâu (2s+).

Keyframes phức tạp

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;      /* Trục xoay: góc trên-trái */
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);        /* Mở cửa gấp 80 độ */
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);        /* Nảy ngược nhẹ */
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);    /* Rơi xuống 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: #795548;
      animation-duration: 2s;        /* Cần lâu hơn hiệu ứng khác */
      animation-fill-mode: both;
    }
    @keyframes hinge {
      0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
      20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
      40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
      80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
      100% { transform: translateY(700px); opacity: 0; }
    }
    .hinge { animation-name: hinge; }
  </style>
</head>
<body>
  <div class="animated hinge"></div>
  <button onclick="location.reload()">Chạy lại</button>
</body>
</html>

Phân tích kỹ thuật

• transform-origin: top left - Quan trọng nhất: tạo trục xoay như cửa
• 80deg → 60deg → 80deg - Mô phỏng rung lắc của cửa khi mở quá mức
• translateY(700px) - Rơi tự do sau khi gãy gờ
• ease-in-out - Chuyển động tự nhiên, không cơ học

Ứng dụng

• Xóa item "dramatic" (xóa tài khoản, xóa dữ liệu quan trọng)
• Game: hiệu ứng tử vong, cửa bung mở
• Easter egg, trang 404 sáng tạo

Lưu ý hiệu năng

Animation phức tạp, duration 2s - dùng thận trọng trên mobile. Cân nhắc will-change: transform, opacity.