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

Trình soạn thảo - Giá trị both của thuộc tính animation-fill-mode trong CSS

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

Tự code rồi chạy thử... Chạy Thử 
<!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>