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

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate-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: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải*/
}
#chayvongtron {
    width: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phả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ị alternate-reverse của thuộc tính animation-direction trong CSS</h1>
<p>Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải</p>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate-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: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải*/
}
#chayvongtron {
    width: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phả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ị alternate-reverse của thuộc tính animation-direction trong CSS</h1>
<p>Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải</p>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate-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: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải*/
}
#chayvongtron {
    width: 260px;
    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: alternate-reverse; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phả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ị alternate-reverse của thuộc tính animation-direction trong CSS</h1>
<p>Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển ngược chiều kim đồng hồ (từ phải qua trái), lần lặp theo số chẵn di chuyển cùng chiều kim đồng hồ, từ trái qua phải</p>

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

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

</body>
</html>

Giá trị alternate-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