CSS是現(xiàn)在網(wǎng)頁(yè)樣式設(shè)計(jì)中絕對(duì)不可或缺的一部分，除了最基本的屬性，如顏色、字體等等之外，還有很多有趣的屬性可以使用。其中一個(gè)有趣的屬性就是transition屬性，它可以讓我們的元素產(chǎn)生平滑的動(dòng)畫效果。

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

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

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

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