Tidadigi Logo

CSS animation-fill-mode Property

Thuộc tính animation-fill-mode trong CSS dùng để xác định style cho animation trước và sau khi chạy. Mặc định, CSS animation không ảnh hưởng đến element cho đến khi keyframe đầu tiên hoặc cuối cùng chạy.

Thuộc tính này có thể ghi đè hành vi mặc định, cho phép kiểm soát animation tốt hơn.

Cú pháp

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Giá trị thuộc tính

Thuộc tính animation-fill-mode có nhiều giá trị, được liệt kê dưới đây:

  • none: Giá trị mặc định. Animation không áp dụng style nào cho element trước hoặc sau khi thực thi.
  • forwards: Sau khi animation hoàn thành, element giữ lại style từ keyframe cuối cùng.
  • backwards: Element áp dụng style từ keyframe đầu tiên trước khi animation bắt đầu.
  • both: Thuộc tính này được dùng để tuân theo các quy tắc cho cả forwards và backwards.
  • initial: Thuộc tính này được dùng để đặt thuộc tính về giá trị mặc định của nó.
  • inherit: Thuộc tính này được dùng để kế thừa thuộc tính này từ element cha.

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng thuộc tính đã giải thích ở trên.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | animation-fill-mode Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h1,p {
            text-align: center;
        }

        h2 {
            width: 400px;
            background-color: orange;
            animation-name: text;
            animation-duration: 3s;
        }

        #one {
            animation-fill-mode: none;
        }

        #two {
            animation-fill-mode: forwards;
        }

        #three {
            animation-fill-mode: backwards;
            animation-delay: 2s;
        }

        #four {
            animation-fill-mode: both;
            animation-delay: 2s;
        }

        @keyframes text {
            from {
                margin-left: 0%;
                background-color: #aaaaaa;
            }

            to {
                margin-left: 60%;
                background-color: #008000;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p>
    <h2 id="one">none</h2>
    <h2 id="two">forwards</h2>
    <h2 id="three">backwards</h2>
    <h2 id="four">both</h2>
</body>

</html>

Output: 

css-animation-fill-mode-property

Thực hành tốt nhất khi sử dụng Animation-Fill-Mode:

  • Sử dụng Animation có ý nghĩa: Đảm bảo animation cải thiện trải nghiệm người dùng chứ không chỉ để trưng bày.
  • Cân nhắc hiệu năng: Kiểm tra animation trên các thiết bị khác nhau để đảm bảo chạy mượt mà.
  • Nâng cao tương tác người dùng: Sử dụng animation để cung cấp phản hồi và cải thiện điều hướng.

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi animation-fill-mode property được liệt kê dưới đây:

  • Google Chrome: 43.0 trở lên
  • Edge: 12.0 trở lên
  • Firefox: 16.0 trở lên
  • Opera: 30.0 trở lên
  • Safari: 9.0 trở lên

Last Updated : 21/07/2025