在網頁設計中，動畫效果是非常重要的一部分。其中，CSS 高度變化動畫非常實用，可以實現頁面元素的“掉落”、“展開”等效果。

/*設置動畫過渡屬性，包括動畫屬性名稱、過渡時間、過渡函數等*/
.box {
transition: height 1s ease;
height: 100px;
}

上述代碼中，利用transition屬性設置了高度變化的動畫效果。其中，height屬性是動畫屬性名稱，1秒是過渡時間，ease是過渡函數，作用是使動畫變化平滑自然。

/*設置鼠標懸浮時高度變化*/
.box:hover {
height: 200px;
}

在懸浮狀態下，將元素高度增加到200像素，實現“掉落”效果。

/*設置過渡效果延遲和持續時間*/
.box {
transition: height 1s ease 0.5s;
height: 100px;
}

在上面代碼中，通過加入第四個參數delay，可以設置過渡效果延遲效果，實現了動畫的暫停效果。

在實際應用中，我們可以將高度變化動畫效果運用到菜單欄、圖標等元素，增加頁面的動態效果，提升用戶體驗。