眾所周知，CSS可以實現很多炫酷的動畫效果，其中CSS icon跳動效果就是非常流行的一種。下面我來給大家介紹一下如何實現這種效果。

.icon{
position: relative;
animation: jump-icon 1s ease-in-out infinite alternate;
}
@keyframes jump-icon{
0%{transform: translateY(0)} /*起始位置*/
50%{transform: translateY(-10px)} /*中間位置，向上跳*/
100%{transform: translateY(0)} /*結束位置，回到原位*/
}

首先需要對圖標元素添加position: relative屬性，使其成為相對定位。然后使用動畫屬性animation，指定動畫名稱為jump-icon，時長為1秒，動畫回放方式為alternate（正反交替播放），循環無限次。接下來指定動畫關鍵幀，設定三個階段，第一個階段是起始位置，第二個階段是跳起來的位置，第三個階段是回到原位的位置。其中transform: translateY()表示向Y軸移動多少像素。

當CSS icon元素應用了以上的CSS樣式后，你將會看到這個圖標元素會快速地上下跳動起來，給人以生動、具有活力的感受。

總之，CSS icon跳動效果不僅解決了靜態圖標的單調，還增添了頁面的互動感。希望我的介紹能對大家有所幫助。