CSS動畫彈出框是一種非常流行的頁面交互效果，可以讓用戶更加直觀地感受頁面中的操作，同時也可以增強頁面的美觀度。今天，我們將介紹如何通過CSS動畫實現彈出框向上的效果。

/* 彈出框樣式 */
.popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
animation: popup-up 0.3s ease-in-out forwards;
}
/* 動畫實現 */
@keyframes popup-up {
from {
transform: translate(-50%, -30%);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}

首先是彈出框的樣式，我們設置了彈出框的位置、大小、內邊距、背景色、圓角和陰影等，然后使用了CSS動畫的簡寫形式animation來添加彈出效果。

在上述代碼中，我們新建了一個名為popup-up的關鍵幀動畫，它的from狀態設置了彈出框在屏幕上方30%的位置，透明度為0，to狀態設置了彈出框在屏幕正中央位置，并且將透明度設置為1。animation屬性中，設置了動畫持續時間為0.3秒，運動軌跡為ease-in-out，最后一個關鍵字forwards表示動畫結束后，保持最后一個狀態。

通過這樣的CSS代碼，我們就可以實現一個彈出框向上升起的動畫效果了。