CSS動畫是網站設計和交互體驗的重要部分，而彈跳動畫作為其中的一種常見動畫效果，可以很好地增強網站的動態感和吸引力。本文將介紹用CSS實現彈跳動畫效果的方法。

.bounce {
animation-name: bounce;
animation-duration: 1.5s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
animation-timing-function: ease-in;
}
50% {
transform: translateY(-20px);
animation-timing-function: ease-out;
}
}

以上是一個使用CSS實現彈跳動畫效果的示例代碼。其中，首先給需要添加彈跳動畫效果的元素（例如一個按鈕）添加一個類名“bounce”（class="bounce"）。

接著，定義名為“bounce”的animation動畫，包括animation-name（動畫名稱）、animation-duration（持續時間）、animation-fill-mode（動畫播放前和播放后元素應該如何呈現）、animation-timing-function（動畫的時間函數類型）等屬性。其中，animation-fill-mode的值為“both”表示動畫結束后元素保持通過動畫所演示的狀態；animation-timing-function的值為“ease-in-out”表示動畫開始和結束的速度慢，中間的速度快。

最后，定義一個名為“bounce”的keyframes，表示動畫的關鍵幀。其中，0%和100%表示動畫的起始和結束狀態，通過transform: translateY(0)將元素Y軸不移動；50%表示動畫的中間狀態，通過transform: translateY(-20px)將元素向上移動20像素。同時，animation-timing-function的值在不同的關鍵幀中設置不同的值，以實現彈性的效果。

通過以上步驟，就可以在網站上添加一個漂亮的彈跳動畫效果，增強網站的動態感和吸引力。