當您瀏覽網站時，您可能會注意到一些元素在屏幕上動畫。這些動畫可以使您的瀏覽體驗更加生動。CSS中有幾個屬性可以用于創建這些動畫效果。

animation-duration: 3s;
animation-name: example;

animation-duration屬性定義動畫效果持續的時間（秒或毫秒）。animation-name屬性定義動畫應該被執行的名稱，這個名稱是您可以自定義的。

@keyframes example {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}

要定義動畫的行為，您需要在CSS中使用@keyframes規則。這個規則定義了在動畫持續時間內應該發生什么。在上面的例子中，動畫從紅色開始，到黃色，到藍色，完成時是綠色。

在動畫完成時，元素將停止在最終屬性的取值上。但是，您也可以定義元素返回到動畫開始時的取值，如下所示：

animation-direction: alternate;
animation-iteration-count: infinite;

animation-direction屬性定義動畫應該如何循環。默認情況下，動畫只循環一次。但是，您也可以反向循環，或使動畫來回循環。animation-iteration-count屬性定義動畫應該循環的次數，如果您想無限循環，請將其設置為“infinite”。

總之，CSS中的動畫屬性允許您創建令人印象深刻的動態效果。通過仔細調整這些屬性的值，您可以為用戶提供更好的用戶體驗。