在網頁設計中，動畫效果是非常重要的元素之一。除了JavaScript外，CSS動畫是實現網頁動畫效果的另一種常用方式。在CSS動畫中，通過設置一些屬性的值來實現動畫效果，其中最常用的效果之一就是上下浮動的動畫。下面我們就來了解一下如何實現CSS動畫上下浮動的效果。

/* 設置元素初始狀態 */
.box {
position: relative;
top: 0; /* 初始位置為0 */
animation: updown 3s infinite cubic-bezier(.5, 0, .5, 1);
/* 指定動畫名稱、時長、重復次數和緩動函數 */
}
/* 定義動畫關鍵幀 */
@keyframes updown {
0% {
top: 0; /* 初始位置為0 */
}
50% {
top: 100px; /* 上浮100px */
}
100% {
top: 0; /* 返回到初始位置 */
}
}

上面的代碼中，我們首先定義了一個元素的樣式，設置它的位置為relative，即相對位置。然后使用animation屬性指定了動畫名稱、時長、重復次數和緩動函數。接下來，我們定義了一個名為updown的關鍵幀動畫，通過設置元素的top屬性實現了上下浮動的效果。最后，我們將這個動畫綁定到元素上，即可實現CSS動畫上下浮動的效果。

值得注意的是，我們在關鍵幀動畫中使用了cubic-bezier函數來指定動畫的緩動函數，這是一個非常常用的函數，可以根據具體需求來調整參數值，以達到理想的緩動效果。

除了上下浮動的動畫效果外，CSS動畫還可以實現很多其他的效果，比如旋轉、縮放、淡入淡出等。在實際項目中，我們可以根據具體需求來選擇不同的動畫效果，以提升用戶體驗。