CSS中的動畫是一種在網頁中添加動態效果的重要工具。通過使用CSS動畫代碼，我們可以讓網頁上的元素動起來，讓用戶體驗更加生動。 要定義CSS動畫，我們需要結合以下屬性：animation、@keyframes、animation-delay和animation-iteration-count等。下面我們來看一些常用CSS動畫代碼，大家可以通過實踐來熟練掌握。

1. 旋轉動畫：

div {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

這段代碼會讓一個紅色的正方形元素以2秒為周期不停地旋轉。關鍵是在@keyframes中定義了旋轉的動畫，通過transform: rotate(deg)屬性，我們可以控制元素的旋轉角度。

2. 平移動畫：

div {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 0;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% { left: 0; }
50% { left: 300px; }
100% { left: 0; }
}

這段代碼會讓一個藍色的正方形元素以2秒為周期往左右來回運動。通過定義@keyframes中的move動畫，我們通過left屬性控制元素的位置。

3. 漸變動畫：

div {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-size: 200% 100%;
animation: gradient 2s linear infinite;
}
@keyframes gradient {
0% { background-position: 0%; }
100% { background-position: 100%; }
}

這段代碼會讓一個顏色漸變的正方形元素以2秒為周期漸變。通過定義@keyframes中的gradient動畫，我們通過background-position屬性控制漸變顏色的位置。 總的來說，CSS動畫是一種可以通過定義關鍵幀來進行動態效果的工具。以上這些常用CSS動畫代碼只是基礎中的基礎，大家可以通過不斷地實踐來進一步熟練地掌握動畫編寫技巧。