CSS3回彈動畫讓網頁元素在運動時更具有活力，它可以讓網頁設計更加生動有趣。下面我們就來看一下如何使用CSS3回彈動畫。

.box {
width: 100px;
height: 100px;
background-color: #f4a460;
position: relative;
animation: bounce 2s ease-in-out;
}
@keyframes bounce {
0%,
100% {
top: 0;
}
50% {
top: 50px;
}
}

上面的代碼中，我們首先定義了一個盒子（class為.box），并設置了它的寬度、高度和背景顏色。接著，我們使用position屬性將其定位為相對定位，這樣可以讓盒子在運動時不影響其它元素的位置。然后，在animation屬性中添加了一個名為bounce的動畫，它的運動時間為2s，并且使用了ease-in-out緩動函數，讓盒子在運動時有一種先慢后快再慢的感覺。

接下來，我們使用@keyframes定義了名為bounce的動畫。在動畫中，我們通過0%和100%的關鍵幀設置了盒子的初始和結束狀態，它們的top值都為0。而在50%關鍵幀中，我們將盒子的top值設置為50px，這樣就能讓盒子在運動時向上彈起，并在下落時有回彈的效果。

使用CSS3回彈動畫可以讓網頁設計更加生動有趣，我們可以通過調整動畫的參數，實現不同的運動效果。同時，我們還可以將它應用于各種元素的運動中，讓網頁在視覺上更加豐富多彩。