Tạo hiệu ứng xoay ra (Rotate Out) với CSS

Giới thiệu

Hiệu ứng Rotate Out làm cho phần tử xoay và mờ dần biến mất. Đây là một trong những animation phổ biến trong thư viện Animate.css. Bài viết này hướng dẫn cách triển khai hiệu ứng này chỉ với CSS thuần túy.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    @-webkit-keyframes rotateOut {
      0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
      }
      100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        opacity: 0;
      }
    }

    @keyframes rotateOut {
      0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
      }
      100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0;
      }
    }

    .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated rotateOut"></div>
  <button onclick="myFunction()">Tải lại trang</button>
  <script>
    function myFunction() {
      location.reload();
    }
  </script>
</body>
</html>

Giải thích các thuộc tính chính

• transform-origin: center center: Đặt tâm xoay ở giữa phần tử
• rotate(0) → rotate(200deg): Xoay từ 0 đến 200 độ
• opacity: 1 → 0: Mờ dần từ hoàn toàn hiển thị đến ẩn hoàn toàn
• animation-fill-mode: both: Giữ trạng thái đầu/cuối của animation

Lưu ý

Thời gian animation mặc định là 10s (rất chậm). Trong thực tế, bạn thường dùng 1s hoặc 0.5s cho mượt mà hơn. Hãy điều chỉnh animation-duration theo nhu cầu.