CSS過渡動畫可以讓我們在元素屬性值改變時，使元素的變化更加平滑、自然。下面是一個簡單的CSS過渡動畫例子。

/* CSS樣式 */
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
transition: width 1s ease-in-out;
}
.box:hover{
width: 200px;
}
/* HTML結(jié)構(gòu) */

在這個例子中，我們創(chuàng)建了一個名為“box”的元素，它具有初始狀態(tài)下的寬度100px、高度100px和紅色背景顏色。我們還為.box元素添加了一個過渡屬性，它指定了在寬度改變時播放動畫，時間為1秒，播放方式為“ease-in-out”。

然后，當我們將鼠標懸停在元素上時，寬度從初始狀態(tài)100px過渡到200px。因為我們已經(jīng)為.box元素設(shè)置了過渡屬性，所以它的寬度變化將平滑地進行。

CSS過渡動畫可以是單個屬性的過渡，也可以是多個屬性一起過渡。我們可以通過“transition”屬性指定需要過渡的屬性，同時也可以設(shè)置過渡的時間和播放方式。過渡屬性可用的值包括：屬性名、時間和某些效果類型（例如“ease”、 “ease-in”、 “ease-in-out”等）。

在上述例子中，我們還添加了一個:hover偽類，以便在鼠標懸停在.box元素上時觸發(fā)寬度的改變。這種情況下，我們可以使用CSS過渡動畫實現(xiàn)更生動的動態(tài)效果，并讓用戶感受到更加流暢的用戶體驗。