CSS動畫是一種讓元素在不同時間點產生不同狀態的動態效果。本文將介紹一些常用CSS動畫。

第一種是過渡（transition）動畫。通過設置元素的變化的時間（transition-duration）和變化方式（transition-timing-function）等屬性，可以實現元素在狀態變化時產生漸變效果。代碼示例如下：

/*設置元素在2秒內從紅色變為藍色*/
div {
background-color: red;
transition-property: background-color;
transition-duration: 2s;
}
div:hover {
background-color: blue;
}

第二種是關鍵幀（keyframe）動畫。設置關鍵幀動畫需要使用@keyframes規則，通過設置元素在不同關鍵幀的狀態，可以實現各種復雜的動畫效果。代碼示例如下：

/*設置元素從左上角移動到右下角*/
div {
position: absolute;
animation: move 5s forwards;
}
@keyframes move {
0% {
top: 0;
left: 0;
}
100% {
top: 100%;
left: 100%;
}
}

第三種是轉換（transform）動畫。通過設置元素的變換方式（transform）屬性，可以實現元素在不改變布局的情況下產生旋轉、縮放、傾斜等效果。代碼示例如下：

/*設置元素在hover時旋轉360度*/
div {
transition: transform .5s;
}
div:hover {
transform: rotate(360deg);
}

以上三種動畫只是CSS動畫中的冰山一角，還有很多其他類型的動畫，可以根據實際需要進行使用。