CSS3動畫是現代網頁設計必不可少的重要技術之一，而其中從中間變大的動畫效果是非常常見的效果。本篇文章將為大家詳細介紹如何使用CSS3實現從中間變大的動畫效果。

首先，需要在html文件中引入一個div元素，作為展示動畫效果的容器：

<div class="animation"></div>

然后，在CSS樣式表中為這個容器添加必要的樣式屬性：

.animation {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #f00;
animation: expand 1s ease-out;
animation-fill-mode: forwards;
}

在上面的代碼中，我們分別設置容器的寬度和高度為0，使其不可見，然后將其定位到頁面的中間位置，設置了背景顏色和動畫效果。接著需要定義動畫效果：

@keyframes expand {
0% {
width: 0;
height: 0;
}
100% {
width: 100%;
height: 100%;
}
}

在上面的代碼中，我們使用了@keyframes關鍵字來定義動畫。在初始狀態下，容器的寬度和高度都為0，表示不可見。在動畫結束時，寬度和高度都會變成100%，讓容器從中間逐漸變大，呈現出動畫效果。

最后，為了使動畫效果保留在最終狀態，需要設置animation-fill-mode屬性為forwards，使得動畫停留在100%的狀態，而不是回到0%的狀態。

通過上述步驟，我們就實現了一個簡單的從中間變大的CSS3動畫效果。