CSS動畫是網頁設計的重要組成部分。有時候我們需要在網頁中使用動畫來展示某些效果。其中一個常見的需求就是需要讓元素的高度在動畫過程中自適應撐開。下面我們將介紹一些如何使用CSS動畫來撐開元素高度的例子。

/* 第一個例子 */
.box {
background: #f2f2f2;
padding: 20px;
overflow: hidden;
transition: height 1s ease-in-out;
}
.box:hover {
height: 400px;
}
/* 第二個例子 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 200px;
height: 200px;
margin: 10px;
background: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
transition: height 1s ease-in-out;
}
.item:hover {
height: 400px;
}
/* 第三個例子 */
.box {
background: #f2f2f2;
padding: 20px;
overflow: hidden;
animation: grow 1s ease-in-out;
}
@keyframes grow {
from {
height: 0;
}
to {
height: 400px;
}
}

第一個例子中，我們使用了一個帶有過渡效果的盒子。當鼠標懸停在盒子上時，盒子的高度將從默認的高度轉換為400px。注意，我們在CSS中使用了overflow: hidden來隱藏不需要的溢出內容。

第二個例子中，我們使用了一個Flex布局的容器來布局項目。當鼠標懸停時，項目的高度將從默認的高度轉換為400px。同樣，我們必須使用對不需要的內容進行溢出的 overflow: hidden 樣式規則。

第三個例子中，我們使用一個關鍵幀動畫來動態地增加元素的高度。我們定義了一個名為grow的動畫，并將它應用于盒子元素上。當動畫播放時，盒子的高度將從0轉換為400px。

總的來說，這三個例子向我們展示了如何使用CSS動畫來改變元素的高度并撐開它。我們可以根據我們自己的需求來選擇使用哪個方法。