Thuộc tính animation-fill-mode trong CSS

Bùi Tấn Lực
863
09/10/2025

Chức năng của Thuộc tính animation-fill-mode trong CSS

Thuộc tính animation-fill-mode trong CSS dùng để chọn các style ở đầu tiên hoặc cuối cùng của keyframe để áp dụng cho vòng chạy animation.

Cú pháp của Thuộc tính animation-fill-mode trong CSS

animation-fill-mode: giatri;

giatri: Giá trị để chọn các style ở đầu tiên hoặc cuối cùng của keyframe để áp dụng cho vòng chạy animation (Ví dụ: both, backwards, forwards)

Các giá trị của Thuộc tính animation-fill-mode trong CSS

forwards: Giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation.

backwards: Áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy.

both: Kết hợp forwards giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation và backwards áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy.

none: (Giá trị mặc định) Phần tử sẽ không áp dụng bất kỳ style nào trước hoặc sau khi chạy animation.

Code Thuộc tính animation-fill-mode trong CSS

Giá trị forwards của thuộc tính animation-fill-mode trong CSS

Giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation:

animation-fill-mode: forwards;

<!DOCTYPE html>
<html>
<head>
<title>Giá trị forwards của thuộc tính animation-fill-mode trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: forwards; /*Giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation*/
}
#chayngang2 {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: forwards; /*Giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation*/
}
@keyframes chayngang{
  from {background: blue;left: 0px;}
  to {background: yellow;left: 200px;}	
}
@keyframes chayngang2{
  0% {background: blue;left: 0px;}
  100% {background: yellow;left: 200px;}	
}
</style>
</head>
<body>
<h1>Giá trị forwards của thuộc tính animation-fill-mode trong CSS</h1>
<p>Giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation</p>

<div id="chayngang">animation-fill-mode: forwards;</div>

<div id="chayngang2">animation-fill-mode: forwards;</div>

</body>
</html>

Chạy Thử

Giá trị backwards của thuộc tính animation-fill-mode trong CSS

Áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy:

animation-fill-mode: backwards;

<!DOCTYPE html>
<html>
<head>
<title>Giá trị backwards của thuộc tính animation-fill-mode trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
    width: 250px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: backwards; /*Áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy*/
}
#chayngang2 {
    width: 250px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: backwards; /*Áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy*/
}
@keyframes chayngang{
  from {background: blue;left: 0px;}
  to {background: yellow;left: 200px;}	
}
@keyframes chayngang2{
  0% {background: blue;left: 0px;}
  100% {background: yellow;left: 200px;}	
}
</style>
</head>
<body>
<h1>Giá trị backwards của thuộc tính animation-fill-mode trong CSS</h1>
<p>Áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy</p>

<div id="chayngang">animation-fill-mode: backwards;</div>

<div id="chayngang2">animation-fill-mode: backwards;</div>

</body>
</html>

Chạy Thử

Giá trị both của thuộc tính animation-fill-mode trong CSS

Kết hợp forwards giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation và backwards áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy:

animation-fill-mode: both;

<!DOCTYPE html>
<html>
<head>
<title>Giá trị both của thuộc tính animation-fill-mode trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: both; /*Kết hợp forwards giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation và backwards áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy*/
}
#chayngang2 {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
    animation-delay: 2s; /*Chờ 2 giây*/
    animation-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-fill-mode: both; /*Kết hợp forwards giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation và backwards áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy*/
}
@keyframes chayngang{
  from {background: blue;left: 0px;}
  to {background: yellow;left: 200px;}	
}
@keyframes chayngang2{
  0% {background: blue;left: 0px;}
  100% {background: yellow;left: 200px;}	
}
</style>
</head>
<body>
<h1>Giá trị both của thuộc tính animation-fill-mode trong CSS</h1>
<p>Kết hợp forwards giữ nguyên các style của keyframe cuối cùng sau khi kết thúc vòng chạy của animation hoặc kết thúc số lần lặp cho một animation và backwards áp dụng các style của keyframe đầu tiên trước khi bắt đầu chạy</p>

<div id="chayngang">animation-fill-mode: both;</div>

<div id="chayngang2">animation-fill-mode: both;</div>

</body>
</html>

Chạy Thử

Cách sử dụng animation-fill-mode hiệu quả trong CSS

animation-fill-mode phát huy tác dụng rõ nhất khi kết hợp với các thuộc tính điều khiển thời điểm bắt đầu, số lần lặp và trạng thái kết thúc của animation. Thay vì chỉ chọn một giá trị riêng lẻ, bạn có thể phối hợp chúng để kiểm soát chính xác giao diện trước, trong và sau quá trình chuyển động.

animation-fill-mode kết hợp với animation-delay

Khi animation-delay được thiết lập, animation sẽ chưa chạy ngay mà chờ một khoảng thời gian nhất định. Nếu muốn phần tử hiển thị theo trạng thái của keyframes ngay trong thời gian chờ, backwards hoặc both là lựa chọn phù hợp.

Ví dụ, phần tử ban đầu được đặt ở trạng thái bên ngoài vùng hiển thị và chỉ xuất hiện sau một khoảng trễ:

.box {
  animation-name: showBox;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes showBox {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Trong trường hợp này, backwards giúp phần tử áp dụng trạng thái của điểm bắt đầu trong thời gian chờ. Nếu muốn giữ luôn trạng thái cuối sau khi animation hoàn tất, có thể thay bằng both.

animation-fill-mode kết hợp với animation-iteration-count

animation-iteration-count quyết định animation lặp lại bao nhiêu lần, trong khi animation-fill-mode kiểm soát trạng thái của phần tử trước hoặc sau quá trình chạy. Hai thuộc tính này bổ trợ nhau nhưng không thay thế chức năng của nhau.

Chẳng hạn, một hiệu ứng có thể chạy ba lần và giữ lại trạng thái cuối cùng sau lần lặp cuối:

.notice {
  animation-name: highlight;
  animation-duration: 0.8s;
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
}

@keyframes highlight {
  from {
    opacity: 0.4;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

Ở đây, animation-iteration-count quyết định số lần hiệu ứng chạy, còn forwards giữ phần tử ở trạng thái được xác định tại cuối animation sau khi các lần lặp hoàn thành.

Khi nào nên sử dụng forwards, backwards và both?

Việc lựa chọn giá trị nên dựa vào thời điểm bạn muốn animation tác động đến phần tử:

forwards: phù hợp khi muốn giữ trạng thái cuối sau khi animation kết thúc, chẳng hạn một hộp thoại trượt vào vị trí mới và không quay lại vị trí ban đầu.
backwards: hữu ích khi animation có độ trễ và bạn muốn áp dụng trạng thái đầu tiên của keyframes trong khoảng thời gian chờ.
both: thích hợp khi cần kiểm soát cả giai đoạn chờ trước khi chạy và trạng thái sau khi kết thúc.

Nếu animation không có animation-delay, giá trị backwards thường ít tạo ra khác biệt rõ rệt. Ngược lại, khi có độ trễ, việc chọn đúng giá trị fill mode sẽ giúp tránh hiện tượng phần tử nhấp nháy hoặc xuất hiện sai vị trí trước khi hiệu ứng bắt đầu.

Những lỗi thường gặp khi sử dụng animation-fill-mode

Một lỗi phổ biến là kỳ vọng forwards sẽ thay đổi giá trị CSS cố định của phần tử. Trên thực tế, nó chỉ giữ trạng thái được tạo ra bởi animation sau khi hiệu ứng hoàn tất. Nếu animation không xác định thuộc tính cần thay đổi trong keyframes, fill mode cũng không tự tạo ra trạng thái mới.

Một vấn đề khác xuất hiện khi sử dụng backwards nhưng không có animation-delay. Khi đó, trạng thái được giữ trước animation có thể không tạo ra khác biệt mà người dùng nhìn thấy.

Ngoài ra, cần phân biệt animation-fill-mode với việc thay đổi trạng thái thực tế của phần tử. Khi animation bị loại bỏ khỏi phần tử hoặc thuộc tính animation được thay đổi, trạng thái do fill mode duy trì cũng không còn được áp dụng. Vì vậy, nếu trạng thái cuối cần được giữ ổn định lâu dài, nên cân nhắc đặt giá trị CSS phù hợp thay vì phụ thuộc hoàn toàn vào animation.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-fill-mode trong CSS.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính animation-fill-mode trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !