CSS動畫已經成為網頁設計中越來越重要的組成部分，本文將介紹兩個常用的CSS動畫。

1. 顏色漸變CSS動畫

.color-animation {
background: linear-gradient(to right, #00b09b, #96c93d);
animation: anim 3s linear infinite alternate;
}
@keyframes anim {
0% {
background-position: left;
}
100% {
background-position: right;
}
}

這段代碼實現了一個漸變顏色的動畫效果。動畫結束后再次反向播放。我們可以通過改變漸變的角度，顏色值和動畫的時間來實現不同的效果。該動畫可以被應用在網頁的背景中，可能會讓網頁更加生動和有趣。

2. 旋轉CSS動畫

.rotation-animation {
display: inline-block;
animation: anim 2s linear infinite;
}
@keyframes anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

該代碼實現了一個旋轉動畫，將元素無限循環旋轉360度。我們可以通過改變旋轉的速度，旋轉的方向和元素的位置和大小來實現不同的效果。該動畫可以被應用在網頁的圖標、按鈕等元素上，讓網頁看起來生動而有吸引力。

總之，CSS動畫是現代Web設計的一個非常重要的組成部分。與JavaScript相比，它更加簡單易懂，容易實現，同時也不需要大量額外的庫文件或插件。希望本文的介紹能夠幫助大家更好地了解這兩個常用的CSS動畫，并將它們應用在網站設計中。