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

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

Giá trị backwards 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ị 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>
Giá trị backwards của thuộc tính animation-fill-mode trong CSS nằm trong bài viết Thuộc tính animation-fill-mode trong CSS