CSS改變高度的動畫效果可以為頁面增添生動感和美觀度。下面介紹兩種基于CSS實現的動畫效果。

/* 方法一：使用transition和height屬性 */
.box1 {
height: 50px;
transition: height 0.5s ease-in-out;
}
.box1:hover {
height: 100px;
}
/* 方法二：使用animation和transform屬性 */
.box2 {
height: 50px;
animation: grow 0.5s ease-in-out;
}
.box2:hover {
animation: shrink 0.5s ease-in-out;
}
@keyframes grow {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@keyframes shrink {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}

方法一使用transition和height屬性，當鼠標懸浮在元素上時，元素的高度會從原來的50px過渡到100px，過渡時間為0.5秒，過渡效果為先加速后減速。方法二則使用animation和transform屬性，在鼠標懸浮時，元素高度通過transform屬性的scaleY方法從0逐漸增加到1，過程持續0.5秒，過渡效果同樣為先加速后減速，當鼠標移開時，使用與增高時反向的動畫效果回到原高度。

以上兩種方法都能夠實現高度動畫效果，具體應使用哪種方法取決于具體需求。