Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Giá trị reverse của thuộc tính animation-direction 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-duration: 3s; /* Thời gian diễn ra animation là 3s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-direction: reverse; /*Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
#chayvongtron {
    width: 200px;
    height: 50px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayvongtron; /* Áp dụng animation có tên "chayvongtron" */
    animation-duration: 6s; /* Thời gian diễn ra animation là 6s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    animation-direction: reverse; /*Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái*/
}
@keyframes chayngang{
  from {background: red;left: 0px;}
  to {background: yellow;left: 200px;}	
}
@keyframes chayvongtron{
  0%   {background: red; left: 0px; top: 0px;}
  25%  {background: yellow; left: 200px; top: 0px;}
  50%  {background: blue; left: 200px; top: 100px;}
  75%  {background: green; left: 0px; top: 100px;}
  100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Giá trị reverse của thuộc tính animation-direction trong CSS</h1>
<p>Mỗi lần di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>

<div id="chayngang">animation-direction: reverse;</div>

<div id="chayvongtron">animation-direction: reverse;</div>

</body>
</html>

Giá trị reverse của thuộc tính animation-direction trong CSS nằm trong bài viết Thuộc tính animation-direction trong CSS