CSS3是前端開發中不可或缺的一部分，它可以為網頁帶來更加靈動美觀的視覺效果。其中，CSS3中的動畫效果讓網頁看起來更加生動，更加吸引人。本文就給大家介紹一種CSS3動畫效果——跳躍動畫。

.box {
width: 50px;
height: 50px;
background-color: #ccc;
position: relative;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% {
top: 0px;
}
50% {
top: -20px;
}
100% {
top: 0px;
}
}

通過以上代碼，我們可以看出來，跳躍動畫是通過定位屬性top來控制的。當top為0px時，.box元素的位置在頁面上最高點，當top為-20px時，.box元素在頁面上最低點，中間過程是通過關鍵幀控制的。其中，animation屬性指定了動畫的名稱、時間以及動畫的播放方式。在這個例子中，動畫名稱為jump，時間為1s，播放方式是先慢后快的過渡。

當我們把以上代碼應用于html頁面中時，會得到一個在頁面上上下跳躍的方塊。這個動畫的美觀性和實用性讓它在網頁開發中應用廣泛。只需要簡單的CSS3代碼，就可以讓你的頁面增添不少生動趣味。