CSS是一種強大的語言，可以用于設置HTML文檔的樣式和布局。其中之一的功能是通過動畫來控制HTML元素的動態效果。而今天我們將介紹如何使用CSS實現DIV從左到右的動畫循環播放。

第一步我們需要先定義一個DIV，并設置其基本樣式。

<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box"></div>

這段代碼中，我們定義了一個寬高為100px的紅色DIV，并采用absolute定位方式放置在文檔的左上角。

接下來就可以開始設置動畫效果了。在CSS中，我們可以使用@keyframes關鍵字來定義動畫關鍵幀。

<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation: move 2s linear infinite;
}
@keyframes move {
0% {left: 0;}
100% {left: calc(100% - 100px);}
}
</style>
<div class="box"></div>

在上述代碼中，我們使用animation屬性來聲明對應名稱的動畫keyframes。該屬性包含四個值：動畫名稱、運動時間、運動方式和循環次數（infinite即為無限次）。

而在@keyframes關鍵字中，我們定義了兩個關鍵幀，分別表示動畫開始和結束時DIV的狀態。運用left屬性實現從左到右的平移，calc函數用于計算DIV從文檔左端點到文檔右端點再減去自身寬度即可實現從左到右的移動。

以上代碼就可以讓DIV從左到右平移，如需反向，則只需將keyframes的兩個關鍵幀的left值互換即可。

總結：CSS的動畫屬性可以幫助我們快速實現HTML元素的動態效果。在此我們介紹了如何使用@keyframes關鍵字和animation屬性編寫實現DIV從左到右動畫的功能。讓動態效果更加美觀。