CSS底部彈出動畫是一種常見的交互設計，在網頁設計中被廣泛應用。本文將介紹如何使用CSS來實現底部彈出動畫效果。

.popup {
position: fixed;
bottom: -100px;
left: 0;
width: 100%;
height: 100px;
background: #fff;
border-top: 1px solid #ddd;
transition: all .3s ease-in-out;
}
.popup.show {
bottom: 0;
}

首先，我們需要定義一個class為popup的元素，并設置其position為fixed，bottom為-100px，表示該元素默認情況下處于頁面底部位置，同時添加一個過渡效果，使底部彈出時更加自然。

接著，我們為popup元素添加一個show的class，該class用于控制popup元素的彈出效果。當添加show class時，將popup元素的bottom屬性設置為0，即可實現底部彈出的效果。

<div class="popup">
<p>這里是底部彈出的內容</p>
</div>
<button onclick="showPopup()">彈出</button>
<button onclick="hidePopup()">隱藏</button>
<script>
function showPopup() {
var popup = document.querySelector('.popup');
popup.classList.add('show');
}
function hidePopup() {
var popup = document.querySelector('.popup');
popup.classList.remove('show');
}
</script>

最后，我們將popup元素和兩個按鈕添加到頁面上，并使用JavaScript來控制彈出和隱藏的效果。當點擊彈出按鈕時，調用showPopup函數，將popup元素添加show class，實現底部彈出的效果；當點擊隱藏按鈕時，調用hidePopup函數，將popup元素移除show class，將其隱藏。

通過以上代碼，我們可以實現一個簡單的CSS底部彈出動畫，該效果可以用在多種場景中，例如網頁通知、功能提示等應用。