CSS動畫是網頁設計中非常重要的一部分，可以為網頁添加生動、炫酷的效果。其中，改變div大小的動畫效果可以讓網頁看起來更加豐富多彩。那么該如何實現呢？接下來我們就來看看。

代碼如下：
HTML部分：
<div class="box"></div>
CSS部分：
.box{
width: 200px;
height: 200px;
background-color: #f00;
transition: width 1s, height 1s;
}
.box:hover{
width: 300px;
height: 300px;
}

上面的代碼中，我們定義了一個帶有class為box的div元素，并設置其寬高為200px，背景顏色為紅色。然后通過CSS的transition屬性設置了寬高屬性的變化時間為1秒，在鼠標懸浮在元素上時將寬高屬性分別設置為300px，從而實現了改變div大小的動畫效果。

除此之外，我們還可以通過CSS的transform屬性來實現改變div大小的動畫效果。下面是代碼示例：

HTML部分：
<div class="box1"></div>
CSS部分：
.box1{
width: 200px;
height: 200px;
background-color: #00f;
transition: transform 1s;
}
.box1:hover{
transform: scale(1.5);
}

該代碼中，我們同樣定義了一個帶有class為box1的div元素，并設置其寬高為200px，背景顏色為藍色。然后通過CSS的transition屬性設置了transform屬性的變化時間為1秒，在鼠標懸浮在元素上時將transform屬性設置為scale(1.5)，從而實現了改變div大小的動畫效果。

總的來說，改變div大小的動畫效果可以為網頁增添豐富的視覺效果，通過CSS的transition和transform屬性的應用，可以輕松實現這一效果。