CSS 彈窗出場進場動畫對于網站的交互效果很重要。下面我們來介紹如何通過 CSS 實現彈窗出場進場動畫。

首先，在 HTML 中，我們需要創建一個彈窗的 div，通過 JavaScript 控制其顯示和隱藏：

<div class="popup">
<h2>彈窗標題</h2>
<p>彈窗內容</p>
</div>

接下來，我們需要應用 CSS 樣式來實現彈窗出場進場動畫。這里我們分別來看出場動畫和進場動畫。

出場動畫：我們可以設置彈窗從下往上滑出屏幕，同時逐漸變透明，以顯示彈窗消失。代碼如下：

.popup {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
background-color: #fff;
animation-name: popupOut;
animation-duration: 0.5s;
animation-timing-function: ease-out;
}
@keyframes popupOut {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}

進場動畫：我們可以設置彈窗從下往上滑入屏幕，同時逐漸變不透明，以達到彈窗出現的效果。代碼如下：

.popup.open {
animation-name: popupIn;
animation-duration: 0.5s;
animation-timing-function: ease-in;
}
@keyframes popupIn {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

以上就是彈窗出場進場動畫的實現方法。通過 CSS 樣式的設置，我們能夠讓彈窗在網頁中有更好的交互效果。