CSS動畫是非常常用的一種技術，可以讓網頁在展示上增加更多的動態效果，提高用戶的使用體驗。那么CSS動畫都有哪些效果呢？下面我們一一介紹。

.transition{
transition: all .3s ease;
}

1. 過渡效果

過渡效果是指元素在兩個狀態間的平滑過渡，可以實現一些簡單的動態效果，如鼠標懸停時改變顏色、大小等。通過CSS3的transition屬性可以實現過渡效果，下面的代碼可以讓元素所有屬性在0.3秒內平滑過渡。

.animation{
animation: test 2s linear infinite;
}
@keyframes test {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

2. 關鍵幀動畫

關鍵幀動畫是指動畫被分成關鍵幀，然后系統會自動計算出每兩個關鍵幀間的中間狀態，從而實現動畫。通過CSS3的animation屬性可以實現關鍵幀動畫，下面的代碼能讓元素在2秒內無限旋轉。

.transform{
transform: rotateY(60deg);
}

3. 變形效果

變形效果是指利用CSS3的transform屬性改變元素的形態和空間位置，可以實現非常炫酷的動態效果。下面的代碼可以讓元素繞Y軸旋轉60度。

.animation{
transition: transform 0.5s ease;
}
:hover .animation{
transform: scale(1.2);
}

4. 縮放效果

縮放效果是指改變元素的大小，可以實現一些簡單的動態效果，如鼠標懸停時放大圖片。通過CSS3的transform屬性中的scale函數可以實現縮放效果，下面的代碼可以實現鼠標懸停時元素放大1.2倍。

.animation{
transition: background-color 0.5s ease;
}
:hover .animation{
background-color: red;
}

5. 顏色漸變效果

顏色漸變效果是指改變元素的顏色，可以實現更加鮮明的動態效果，如鼠標懸停時改變背景色。通過CSS3的transition屬性可以實現顏色漸變效果，下面的代碼可以實現鼠標懸停時元素背景色變成紅色。