CSS3是炙手可熱的前端技術(shù)之一，其中過渡和動畫是最受歡迎的特性之一。CSS3過渡動畫是通過變化來實現(xiàn)元素的平滑過渡效果。

.box{
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s;
}
.box:hover{
width: 200px;
height: 200px;
background-color: orange;
}

上述代碼表示當(dāng)鼠標(biāo)懸停在名為“box”的元素上時，元素的寬高和背景顏色都會平滑地過渡到另一組值，這個過程的時長為1秒，這正是過渡動畫所做的。

除了屬性值的過渡，過渡動畫還可以在元素狀態(tài)的切換中使用。例如，可以在一個按鈕的懸停狀態(tài)和聚焦?fàn)顟B(tài)之間添加過渡動畫。

.btn{
background-color: blue;
color: white;
transition: background-color 0.3s ease-in-out;
}
.btn:hover, .btn:focus{
background-color: orange;
transition: background-color 0.3s ease-in-out;
}

上述代碼代表了一個名為“btn”的按鈕，在鼠標(biāo)懸停或聚焦時會有平滑的背景顏色過渡效果。可以通過“transition”屬性實現(xiàn)該特效。

最后，需要注意的是，在使用CSS3過渡動畫時不應(yīng)過度使用。過多的過渡動畫會導(dǎo)致網(wǎng)站速度緩慢，降低用戶體驗。