CSS3中的變寬動畫是一種非常有趣和實用的動畫效果。它可以將一個元素從原本的寬度逐漸變寬，或者從原先的寬度逐漸變窄。

/* 定義一個變寬動畫 */
@keyframes spread {
from {
width: 0;
}
to {
width: 200px;
}
}
/* 將動畫應用到元素中 */
.element {
animation-name: spread;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}

在上面的代碼中，我們首先定義了一個名為 "spread" 的變寬動畫，它從元素的寬度為0開始，逐漸變為200px的寬度。接下來，我們將這個動畫應用到一個名為 ".element" 的元素中。在動畫中，我們設置了以下屬性：

• animation-name:用于指定要應用的動畫名稱，即上面定義的 "spread"。
• animation-duration:用于指定動畫播放的持續時間，這里設置為2s。
• animation-timing-function:用于指定動畫的緩動函數，這里設置為 "ease"，即輕松加速緩動。
• animation-fill-mode:用于指定動畫播放完后元素的狀態，這里設置為 "forwards"，即保持動畫結束時的狀態。

通過這些屬性的設置，我們就可以輕松地創建一個變寬動畫的效果。當然，我們也可以根據需要修改動畫的其他屬性，如延遲時間、反向播放等等。CSS3的動畫效果非常靈活，可以為我們的網頁增添不少亮點。