CSS3中有一個非常實用的屬性——width動畫。它能讓網頁中的元素在寬度上出現動態變化的效果。下面通過一些例子來展示如何使用CSS3中的width動畫。

/* 定義默認的狀態 */
.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: width 1s ease; /* 定義寬度屬性的過渡效果 */
}
/* 定義hover狀態 */
.box:hover {
width: 200px;
}

上述代碼中，我們定義了一個大小為100*100的灰色方塊，同時定義了它的width屬性在1秒鐘內發生變化時，變化趨勢呈現出減速的效果。當鼠標滑過該方塊時，它的寬度會從100px變成200px。

/* 定義默認的狀態 */
.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: width 1s ease; /* 定義寬度屬性的過渡效果 */
}
/* 定義hover狀態 */
.box:hover {
width: 200px;
transition: width 2s ease; /* 定義變寬的過程耗時2s */
}

在前一個例子的基礎上，我們將hover狀態的寬度變化耗時設為2秒。這樣，它會有更明顯的慢動作效果。注意，我們還需要重新定義一下過渡效果的耗時。如果不定義，過渡效果的耗時仍然是1秒鐘。

/* 定義默認的狀態 */
.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: width 1s ease-in-out; /* 定義寬度屬性的過渡效果，呈現加速減速效果 */
}
/* 定義hover狀態 */
.box:hover {
width: 200px;
}

在這個例子中，我們定義過渡效果呈現加速減速效果，通過在transition屬性中設定ease-in-out值來實現。需要注意的是，為了讓加速減速效果更加明顯，我們需要把過渡效果的耗時設為1秒鐘。

通過這些例子，可以看出CSS3中的width動畫非常實用。通過設定不同的過渡效果屬性、耗時，以及寬度變化值，可以實現更多的動畫效果，并豐富網頁的交互體驗。