CSS動畫是網頁設計中比較常用的一種技術，通過CSS屬性改變實現頁面動態效果，其中彈出效果是比較常見的一種。如何使用CSS實現彈出效果呢？

.pop-up {
animation-name: bounceIn;
animation-duration: 0.8s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

我們可以使用CSS3動畫實現彈出效果，該示例代碼中，我們使用了bounceIn這個動畫名稱，并通過keyframes指定了動畫的每個階段，定義了初始狀態、20%階段、40%階段……100%階段。其中，每個階段都具體定義了元素所應該呈現的樣式。

接下來，我們通過為元素添加pop-up類，使其應用bounceIn這個動畫。同時，我們為動畫屬性指定了動畫時長、動畫補間值、動畫過渡方式等，以便控制動畫效果。

通過該示例代碼，我們可以實現CSS彈出效果，使網頁設計更加具有動態行為，符合用戶期望。