CSS動畫是網頁設計中非常重要的一部分，可以通過各種動畫效果為網頁添加生動活潑的呈現方式。本文將分享如何使用CSS動畫實現從下往上打開的效果。

首先，在HTML中創建一個容器，并為其添加一個CSS類。在CSS中，將該容器的高度設為0，讓其隱藏起來。然后使用absolute和bottom屬性將該容器定位在頁面底部，從而實現從下往上的打開效果。

<div class="container">
<p>這里是容器內容</p>
</div>

.container {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.5s;
}

接下來，使用JavaScript為容器添加一個事件監聽器。當用戶點擊打開按鈕時，將容器的高度設為100%，從而實現從下往上的打開效果。同樣，點擊關閉按鈕時，將容器的高度設為0，實現從上往下的關閉效果。

<button onclick="openContainer()">打開容器</button>
<button onclick="closeContainer()">關閉容器</button>

function openContainer() {
document.querySelector('.container').style.height = '100%';
}
function closeContainer() {
document.querySelector('.container').style.height = '0';
}

最后，使用CSS調整容器的樣式，以便與網頁的整體風格相符。例如，添加背景顏色、邊框、陰影等等。

.container {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.5s;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 20px;
box-sizing: border-box;
}

通過簡單地添加CSS動畫，您可以輕松地為網頁添加出色的交互效果，從而提升用戶的體驗和滿意度。