CSS3動畫是一種給網站增加不少動感的方法。其中一種應用是使用CSS3動畫來制作跳動的效果。這篇文章將向大家介紹如何通過簡單的代碼達到這種效果。

#animation{
animation-name: jump;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
top: 0;
}
@keyframes jump{
0%{
top: 0;
}
50%{
top: -50px;
}
100%{
top: 0;
}
}

以上是制作跳動效果的CSS代碼。首先，我們使用#animation來選擇需要應用動畫的元素。接著，我們定義了動畫的相關設置，比如動畫名稱（jump）、 動畫持續時間（1s）、動畫循環次數（infinite）、動畫運動基本速度（linear）等等。

接下來，我們使用@keyframes來定義動畫的關鍵幀。0%的關鍵幀表示動畫開始時動畫元素所在的狀態，50%的關鍵幀表示動畫所在元素運動到動畫中間狀態，100%的關鍵幀表示動畫結束時動畫元素所處的狀態。在這個例子中，我們通過調整元素的top屬性值來實現跳動效果。在0%和100%的關鍵幀中，top的屬性值都為0，而在50%的關鍵幀中，元素的top屬性值變為負的50px。這樣的變化就使元素向上跳動了。

最后，我們只需將CSS代碼應用到需要實現跳動效果的元素上，它們就會被設置成跳動狀態了。這種跳動效果是CSS3動畫中最簡單的一種，但它能夠使你的網站變得生動、活潑、吸引人的同時，也會給用戶帶來良好的操作體驗。