CSS Transition是CSS的一個(gè)屬性，它允許我們?yōu)镠TML元素添加過渡效果。在這篇文章中，我們將詳細(xì)解釋如何使用CSS Transition<div>元素。

，讓我們來看一個(gè)簡單的例子，說明如何為<div>元素添加過渡效果：

<code>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: width 2s;
}
.box:hover {
width: 400px;
}
</code>

上面的代碼中，我們創(chuàng)建了一個(gè)名為“box”的CSS類，設(shè)置了<div>元素的初始樣式。接下來，我們通過使用transition屬性指定了“width 2s”，這意味著當(dāng)<div>元素的寬度發(fā)生變化時(shí)，動(dòng)畫將持續(xù)2秒。當(dāng)我們將鼠標(biāo)懸停在<div>元素上時(shí)，通過:hover選擇器，將<div>元素的寬度增加到400像素，過渡效果會(huì)自動(dòng)應(yīng)用。

除了寬度之外，我們還可以為其他CSS屬性添加過渡效果。例如，我們可以使用transition屬性來實(shí)現(xiàn)背景色的漸變效果：

<code>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 2s;
}
.box:hover {
background-color: blue;
}
</code>

在上面的例子中，我們將鼠標(biāo)懸停在<div>元素上時(shí)，將背景色更改為藍(lán)色。由于我們?yōu)楸尘吧O(shè)置了過渡效果，所以這個(gè)轉(zhuǎn)變將會(huì)平滑進(jìn)行，持續(xù)2秒。

另一個(gè)常見的用途是使用CSS Transition來添加尺寸變化的動(dòng)畫。我們可以使用width和height屬性實(shí)現(xiàn)這個(gè)效果，例如：

<code>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: width 1s, height 1s;
}
.box:hover {
width: 400px;
height: 400px;
}
</code>

在上面的示例中，當(dāng)鼠標(biāo)懸停在<div>元素上時(shí)，將同時(shí)改變其寬度和高度。過渡效果將持續(xù)1秒。

總而言之，通過使用CSS Transition，我們可以為<div>元素添加各種過渡效果，例如改變寬度、高度、背景色等。這些過渡效果可以通過設(shè)置transition屬性來控制其持續(xù)時(shí)間。希望這篇文章能幫助你更好地理解如何使用CSS Transition來為<div>元素添加動(dòng)畫效果。