在網頁設計中，動畫效果可以為頁面注入生動活潑的感覺，增強交互體驗。其中，CSS動畫是一種簡單而有效的動畫方式之一。本文將向大家分享如何使用CSS實現左右跳動的動畫效果。

/*CSS代碼*/
.box {
position: relative;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% {
left: 0;
}
50% {
left: 100px;
}
100% {
left: 0;
}
}

首先，我們需要一個HTML容器，讓動畫效果在其內部展示。在CSS中，我們對該容器進行定位設定position:relative，然后設置相應的動畫效果。

我們在CSS中使用了@keyframes，它是定義動畫變化過程的關鍵。在這里，我們定義了三個關鍵幀（0%、50%、100%），并設定其left屬性值，從而實現跳動效果。

其中，我們將.left-value設為0，這是為了防止瀏覽器出現不必要的計算誤差。設定animation屬性，并將其值設為動畫名稱（jump）、動畫持續時間（1s）、緩動函數（ease-in-out）及重復次數（infinite），即可完成動畫效果的實現。

如此，一個簡單的左右跳動的動畫效果就完成了。但值得注意的是，雖然CSS動畫簡單易用，但在實際開發中，我們還應當注意動畫效果的兼容性，以避免出現瀏覽器兼容問題。