CSS彈框動畫效果可以為網站或應用程序增添視覺色彩，并提升用戶體驗。下面我們將介紹一些CSS彈框動畫效果，以及如何使用這些效果來設計彈框。

/* 彈框基本樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
}
/* 淡入淡出效果 */
.fade {
animation: fade-in .3s ease-in-out forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 從上方彈出效果 */
.slide-top {
animation: slide-top .3s ease-in-out forwards;
}
@keyframes slide-top {
from {
transform: translate(-50%, -200%);
}
to {
transform: translate(-50%, -50%);
}
}
/* 從下方彈出效果 */
.slide-bottom {
animation: slide-bottom .3s ease-in-out forwards;
}
@keyframes slide-bottom {
from {
transform: translate(-50%, 200%);
}
to {
transform: translate(-50%, -50%);
}
}
/* 從左方彈出效果 */
.slide-left {
animation: slide-left .3s ease-in-out forwards;
}
@keyframes slide-left {
from {
transform: translate(-200%, -50%);
}
to {
transform: translate(-50%, -50%);
}
}
/* 從右方彈出效果 */
.slide-right {
animation: slide-right .3s ease-in-out forwards;
}
@keyframes slide-right {
from {
transform: translate(200%, -50%);
}
to {
transform: translate(-50%, -50%);
}
}

利用上述CSS代碼，我們可以很簡單地創建各種彈框動畫效果。例如使用.fade類來創建淡入淡出效果，或者使用.slide-top類來創建從上方彈出效果。您可以根據自己的需要進行組合使用，從而創造出獨特的彈框效果，讓用戶感到愉悅和舒適。