過渡動畫是美化網頁效果的一種好方式。在HTML中使用過渡動畫，可以通過CSS的transition屬性實現。

在CSS中，transition屬性需要指定四個參數：屬性名稱、過渡時間、過渡類型、過渡延遲。例如：

.box{
transition: all 0.3s ease-in-out 0s;
}

這個樣式指定了.box元素的所有屬性在0.3秒內完成過渡，過渡類型是ease-in-out（即先加速后減速），過渡延遲為0秒。

當然，我們通常只需要對某個屬性進行過渡，比如：

.box{
transition: background-color 0.3s ease-in-out 0s;
}

這個樣式只對背景色進行過渡。

在HTML中，我們需要給元素添加一個點擊事件，通過JavaScript代碼修改元素的樣式，觸發過渡動畫。例如：

<div class="box" onclick="toggleBackground()"></div>
<script>
function toggleBackground(){
var box = document.querySelector(".box");
box.classList.toggle("bg-change");
}
</script>

這里定義一個.toggleBackground()函數，首先獲取到.box元素，然后通過classList.toggle()方法來切換這個元素的.bg-change樣式，從而改變背景色并觸發過渡動畫。

最后，在CSS中定義.bg-change樣式：

.box.bg-change{
background-color: red;
}

當.box元素被點擊后，就會加上.bg-change樣式，從而改變背景色并觸發過渡動畫，效果非常流暢。