CSS3動畫是一個非常強大的工具，它可以實現很多想象不到的效果。今天我們來學習一下如何使用CSS3動畫來實現盒子變大的效果。

.box {
width: 100px;
height: 100px;
background-color: #f00;
transition: all 0.5s ease-in-out;
}
.box:hover {
width: 200px;
height: 200px;
}

在這段代碼中，我們定義了一個名為“box”的盒子，并給它設置了寬高和背景色。然后我們使用了CSS3的過渡屬性（transition）來定義動畫的效果。它有三個參數：

• 屬性名稱
• 過渡時間
• 過渡函數

在這個例子中，我們傳遞了“all”作為第一個參數，這將應用于所有屬性的變化。第二個參數是過渡時間，這里我們設置為0.5秒，表示動畫在0.5秒內完成。第三個參數是過渡函數，這里我們使用了“ease-in-out”，表示效果將以一個慢進慢出的方式實現。

接下來我們使用:hover偽類來表示鼠標移動到盒子上時的效果。在這里我們只是改變了盒子的寬和高，CSS3動畫將根據我們之前定義的過渡屬性來實現平滑的動態效果。

通過這個例子，我們學會了如何使用CSS3動畫來實現盒子變大的效果。這個技能可以幫助我們創建更好的用戶體驗和視覺效果。