在前端開發中，經常需要使用 CSS 制作動畫效果來提高頁面的交互性。如果我們想制作一種從中間向兩邊展開的動畫效果，該如何實現呢？

.slide {
position: relative;
}
.slide >div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 2px;
background-color: #000;
opacity: 0;
transition: all .5s ease-out;
}
.slide:hover >div {
opacity: 1;
width: 50%;
}
.slide >div:first-child {
transform-origin: left center;
}
.slide >div:last-child {
transform-origin: right center;
}

我們首先需要一個包含兩個塊級元素的容器，即類名為 slide 的 div。這兩個塊級元素是用來制作動畫效果的，它們會從中間向兩邊展開。

我們先定義兩個塊級元素的基本樣式，它們的寬度為 0，高度為 2px，背景色為黑色，垂直居中。transition 屬性定義了元素變化時需要過渡的 CSS 屬性，這里是所有 CSS 屬性變化，過渡時間為 0.5 秒，easing 函數為 ease-out，即從快到慢。

接下來，我們用:hover 偽類選擇器來定義鼠標懸浮在 slide 元素上時候的樣式。我們需要讓兩個塊級元素的寬度從 0 變為 50%，并且背景色透明度從 0 變為 1，實現展開的效果。

最后，我們分別為兩個塊級元素定義 transform-origin 屬性，這會使它們以左側和右側為變換中心，分別向兩側展開。

通過以上的樣式定義，我們就能實現從中間向兩邊展開的動畫效果了。可以根據實際需求調整寬度、顏色、過渡時間、easing 函數等屬性，從而達到想要的效果。