×

Cách sử dụng animation-fill-mode - Chế độ lấp đầy hoạt hình CSS

Avatar of admin
admin 0 Views

Khi làm việc với các hoạt hình trong CSS, một trong những thuộc tính quan trọng và ít được chú ý đến là animation-fill-mode. Thuộc tính này quyết định cách các giá trị thuộc tính của một phần tử sẽ được áp dụng trước và sau khi hoạt hình của nó chạy. Điều này có thể tạo ra sự khác biệt lớn về độ mượt mà và sự chuyên nghiệp của một trang web.

Chế độ hoạt động

Có bốn giá trị chính mà animation-fill-mode có thể nhận: none, forwards, backwards, và both. Hãy cùng nhau xem xét từng giá trị này và cách chúng ảnh hưởng đến các hoạt hình CSS.

  1. None: Đây là giá trị mặc định của animation-fill-mode. Khi được thiết lập ở giá trị này, phần tử sẽ không giữ lại bất kỳ trạng thái nào của hoạt hình trước hoặc sau khi nó chạy. Có nghĩa là ngay sau khi hoạt hình kết thúc, phần tử sẽ quay lại trạng thái ban đầu của nó. Giả sử nếu bạn di chuyển một phần tử từ trái qua phải, khi hoạt hình kết thúc, phần tử sẽ trở lại vị trí ban đầu.

    .example {
    animation-fill-mode: none;
}

  2. Forwards: Khi giá trị forwards được sử dụng, phần tử sẽ giữ lại trạng thái cuối cùng của hoạt hình sau khi nó kết thúc. Điều này đặc biệt hữu ích khi bạn muốn phần tử kết thúc ở một trạng thái mới và giữ nguyên trạng thái đó sau khi hoạt hình dừng lại. Ví dụ, trong một hoạt hình di chuyển phần tử từ trên xuống dưới, phần tử sẽ giữ vị trí cuối cùng, không quay trở lại vị trí ban đầu.

    .example {
    animation-fill-mode: forwards;
}

  3. Backwards: Trường hợp sử dụng backwards, phần tử sẽ "giả vờ" như hoạt hình đã bắt đầu từ trước khi nó thực sự làm vậy. Điều này nghĩa là các thuộc tính của phần tử sẽ áp dụng ngay giá trị khung hình đầu tiên của hoạt hình trước khi hoạt hình chính thức bắt đầu. Điều này có thể giúp duy trì sự mượt mà khi chuyển đổi giữa các trạng thái của phần tử.

    .example {
    animation-fill-mode: backwards;
}

  4. Both: Với giá trị both, phần tử sẽ áp dụng cả trạng thái forwards và backwards. Về cơ bản, phần tử sẽ giữ cả trạng thái đầu tiên trước khi hoạt hình bắt đầu và trạng thái cuối cùng sau khi hoạt hình kết thúc. Điều này cung cấp sự kiểm soát tối đa cho các kỹ thuật hoạt hình phức tạp.

    .example {
    animation-fill-mode: both;
}

Một số ví dụ cụ thể

Để minh họa tác động của animation-fill-mode, hãy xét ví dụ sau đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Fill Mode Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            animation: move 2s;
        }

        @keyframes move {
            from { top: 0; left: 0; }
            to { top: 200px; left: 200px; }
        }

        .none {
            animation-fill-mode: none;
        }

        .forwards {
            animation-fill-mode: forwards;
        }

        .backwards {
            animation-fill-mode: backwards;
        }

        .both {
            animation-fill-mode: both;
        }
    </style>
</head>
<body>

    <div class="box none"></div>
    <div class="box forwards"></div>
    <div class="box backwards"></div>
    <div class="box both"></div>

</body>
</html>

Trường hợp này sẽ hiển thị bốn hộp đỏ với các chế độ lấp đầy hoạt hình khác nhau, bạn có thể thấy sự khác biệt rõ ràng giữa việc các hộp duy trì hoặc không duy trì vị trí hoạt hình của chúng.

Kết luận

Việc hiểu và sử dụng đúng animation-fill-mode có thể giúp bạn tạo ra những hoạt hình CSS chuyên nghiệp và mượt mà hơn. Nó không chỉ giúp kiểm soát trạng thái của phần tử mà còn cải thiện trải nghiệm người dùng trên trang web của bạn. Hãy thử áp dụng animation-fill-mode trong các dự án tiếp theo của bạn để thấy sự khác biệt rõ rệt.

Comments

Bài viết liên quan