在網(wǎng)頁設(shè)計中，動畫效果是非常重要的，能夠增強用戶對網(wǎng)頁的體驗。今天我們來講解一種CSS動畫效果：上下跳動。

.box {
position: relative;
animation-name: jump;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes jump {
0%, 100% {
top: 0;
}
50% {
top: -10px;
}
}

上面的代碼中，我們定義了一個class為box的元素。首先，我們設(shè)置了position為relative，讓元素處于相對定位狀態(tài)，這樣才能動態(tài)地移動它的位置。接下來，我們定義了一個名為jump的動畫，主要包含以下幾個屬性：

• animation-name：動畫名稱，即jump。
• animation-duration：動畫持續(xù)時間，單位為秒。
• animation-timing-function：動畫的時間曲線，即動畫的變化速度。
• animation-iteration-count：動畫的播放次數(shù)，這里我們設(shè)置為infinite，表示無限循環(huán)。

接下來是我們動畫的具體實現(xiàn)方式。我們使用@keyframes關(guān)鍵字定義jump動畫，控制元素向上、向下移動。在0%和100%的位置，元素的top屬性為0，即不發(fā)生移動；而在50%的位置，頂部向上移動了10px。這樣，我們就完成了上下跳動的動畫效果。