CSS是現在網頁樣式設計中絕對不可或缺的一部分，除了最基本的屬性，如顏色、字體等等之外，還有很多有趣的屬性可以使用。其中一個有趣的屬性就是transition屬性，它可以讓我們的元素產生平滑的動畫效果。

transition屬性可以為元素的某些屬性設置過渡效果，如顏色、大小、位置等等，本文以位置為例，讓元素在慢慢移動的過程中展現過渡動畫。

/* 設置元素的樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative; 
/* 在父元素為相對定位的情況下，子元素設置絕對定位可以在父元素內做自由移動 */
top: 0;
left: 0;
transition: all 2s; 
/* 指定所有屬性都過渡2秒，可以只過渡特定屬性 */
}
.box:hover {
top: 200px; /* 鼠標移動到元素上時，向下移動200px */
left: 200px; /* 鼠標移動到元素上時，向右移動200px */
}

代碼中，我們先為元素設置一個初始位置，使其相對于父元素頂部和左側都為0。然后通過設置transition屬性，使其在2秒內過渡到新的位置（即top和left屬性值變?yōu)?00px時的位置）。當鼠標移動到元素上時，觸發(fā)hover偽類，使元素產生新的位置屬性值，元素開始慢慢移動到新的位置，過程中產生平滑的動畫效果。

使用transition屬性可以為網頁增添動態(tài)的、有趣的效果，可以為網頁設計帶來更多的可能性。但需要注意的是，在過渡效果時間較長的情況下，可能會影響頁面的性能，使頁面出現卡頓等情況，因此需要根據實際情況謹慎地使用該屬性。