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

.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”的元素上時(shí)，元素的寬高和背景顏色都會(huì)平滑地過(guò)渡到另一組值，這個(gè)過(guò)程的時(shí)長(zhǎng)為1秒，這正是過(guò)渡動(dòng)畫所做的。

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

.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;
}

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

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