CSS是一種很重要的網頁設計語言，它可以為網頁添加各種樣式和動畫效果。在網頁設計中，我們經常需要使用div元素來劃分頁面結構。而在這些div元素的顯示效果中，過渡效果則是很常用的一種效果。

過渡效果可以使元素的顯示過渡得更流暢自然。在CSS中，我們可以使用transition屬性來設置過渡效果。

div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s;
}
div:hover {
width: 400px;
height: 400px;
background-color: blue;
}

上面的代碼演示了一個div元素的過渡效果。當鼠標hover在這個div元素上時，它的寬度和高度同時擴大兩倍，并且背景色也從紅色變為了藍色。在這個過程中，transition屬性發揮了重要的作用。

transition屬性有四個值，分別是transition-property、transition-duration、transition-timing-function和transition-delay。其中，transition-property表示需要過渡的屬性，transition-duration表示過渡的時間，transition-timing-function表示過渡的動畫效果，transition-delay表示延遲過渡的時間。

在上面的代碼中，我們使用了all值來表示需要過渡所有屬性，2s表示過渡時間為2秒。如果需要更換動畫效果，我們可以使用ease、linear、ease-in、ease-out和ease-in-out等值來表示。比如說，我們把上面的代碼中的transition屬性設置為：

transition: width 2s ease-in-out;

它就表示只過渡寬度屬性，過渡時間為2秒，并且過渡效果是先減速后加速。

就這樣，我們可以使用transition屬性為div元素添加各種酷炫的過渡效果，讓頁面顯示更加生動有趣。