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, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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á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:

<!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:

<!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:

<!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ử

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

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

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

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn