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

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate 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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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ị alternate 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 theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate 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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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ị alternate 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 theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Giá trị alternate 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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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: alternate; /*Lần chạy đầu tiên và lần lặp theo số lẻ di chuyển theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵ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ị alternate 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 theo chiều kim đồng hồ (từ trái qua phải), lần lặp theo số chẵn di chuyển ngược chiều kim đồng hồ, từ phải qua trái</p>

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

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

</body>
</html>

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