CSS動畫是一種強大的工具，可以讓網站和應用程序看起來更加生動和吸引人。本質上，CSS動畫是通過CSS屬性的變化來創建動態效果的。與JavaScript等其他技術相比，CSS動畫有許多優勢，例如更少的代碼，更高的性能和更易于維護。下面讓我們來了解一下CSS動畫的基礎。

/* 一個簡單的CSS動畫例子 */
.box {
width: 50px;
height: 50px;
background-color: red;
animation-name: moveright;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes moveright {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}

在上面的示例中，我們定義了一個class為"box"的元素。它有一個寬度和高度，背景顏色為紅色。我們還為它的動畫屬性指定了三個值：animation-name，animation-duration和animation-iteration-count。

animation-name定義了這個動畫的名稱，這個值必須和@keyframes規則中定義的名稱相同。@keyframes規則定義了動畫的關鍵幀。它是通過從"from"關鍵幀到"to"關鍵幀來描述這個動畫的。在這個規則中，我們只定義了兩個關鍵幀，所以動畫只有兩個狀態。

animation-duration定義了動畫的持續時間。在這個例子中，動畫將持續2秒鐘。animation-iteration-count定義了動畫的播放次數。在這個例子中，動畫將無限播放。

最后，我們定義了一個簡單的動畫，讓元素向右移動200像素。這通過@keyframes規則中的translateX變換實現。

當我們應用上面的CSS時，元素將以指定的動畫向右移動200像素，然后返回原始狀態并重新開始動畫。這是一個簡單但有效的例子，可以幫助您了解CSS動畫的基礎知識和語法。