CSS Animations Fill Mode

<!DOCTYPE html>
<html>
<head>
<style>
    div {
       position:relative;
       width:100px;
       border:2px solid black;
       background:hotpink;
	   height:50px;
       text-align:center;
       line-height:50px;
       -webkit-animation-duration:6s;
	   animation-duration:6s;
       -webkit-animation-name:val1-fillmode;
       animation-name:val1-fillmode;
       animation-delay:2s;
    }
    .none{animation-fill-mode: none;}
    .forwards{animation-fill-mode: forwards;}
    .backwards{animation-fill-mode: backwards;}
    .both{animation-fill-mode: both;} 	
	   	
    @keyframes val1-fillmode {
       0% {background-color:yellow;transform:translateX(60px);} 
	   25% {background-color:aqua;transform:translateX(120px);}
	   50% {background-color:green;transform:translateX(180px);}
       100% {background-color:orange;transform:translateX(240px);}
    }
</style>
</head>
<body>
    <h2>Example of CSS animation-fill-mode Property</h2>
    <div class="none">None</div><br>
    <div class="forwards">Forwards</div><br>
    <div class="backwards">Backwards</div><br>
    <div class="both">both</div>
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
    div {
       position:relative;
       width:100px;
       border:2px solid black;
       background:hotpink;
       height:50px;
       text-align:center;
       line-height:50px;
       -webkit-animation-duration:6s;
       animation-duration:6s;
       -webkit-animation-name:val1-fillmode;
       animation-name:val1-fillmode;
       animation-delay:2s;
    }
    .none{animation-fill-mode: none;}
    .forwards{animation-fill-mode: forwards;}
    .backwards{animation-fill-mode: backwards;}
    .both{animation-fill-mode: both;}   
        
    @keyframes val1-fillmode {
       0% {background-color:yellow;transform:translateX(60px);} 
       25% {background-color:aqua;transform:translateX(120px);}
       50% {background-color:green;transform:translateX(180px);}
       100% {background-color:orange;transform:translateX(240px);}
    }
</style>
</head>
<body>
    <h2>Example of CSS animation-fill-mode Property</h2>
    <div class="none">None</div><br>
    <div class="forwards">Forwards</div><br>
    <div class="backwards">Backwards</div><br>
    <div class="both">both</div>
</body>
</html>
​