CSS底部彈出動畫是一種炫酷的網頁效果，通過CSS的動畫特性可以實現彈出框在底部位置的平滑過渡，給用戶帶來更舒適的交互體驗。

下面是一個簡單的CSS底部彈出動畫示例：

.popup {
position: fixed;
bottom: 0;
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 0 -1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
transition: transform .3s ease-in-out;
transform: translateY(100%);
}
.popup.active {
transform: translateY(0);
}

首先，我們定義一個具有position:fixed屬性的彈出框，將其位置設置在頁面底部。接下來，定義其初始狀態為隱藏狀態，也就是在頁面底部，而不可見狀態，采用 translateY(100%)設置。然后，通過給該元素添加.active的className，給它添加transform: translateY(0);屬性，實現彈出的動畫效果。

在JavaScript中，通過控制彈出框的className，就能實現彈出和隱藏的效果：

var popup = document.querySelector('.popup');
var button = document.querySelector('button');
button.addEventListener('click', function() {
popup.classList.toggle('active');
});

CSS底部彈出動畫是一種簡單而又有趣的網頁效果，通過掌握其原理，我們可以創建更加吸引人的交互體驗。