CSS動畫是現代網頁設計中不可或缺的一部分。下面我們來學習一下如何制作CSS動畫上下游動效果。

@keyframes updown {
0% {
transform: translateY(0);/*將元素沿著Y軸向上移動0*/
}
50% {
transform: translateY(-20px);/*將元素沿著Y軸向上移動20像素*/
}
100% {
transform: translateY(0);/*將元素沿著Y軸向上移動0*/
}
}
.box {
animation: updown 2s ease-in-out infinite;/*應用動畫*/
}

代碼解釋：

首先定義一個名為updown的動畫。在0%時，元素沿著Y軸向上移動0。在50%時，元素沿著Y軸向上移動20像素。在100%時，元素沿著Y軸向上移動0。

.box類是應用動畫的元素。動畫的名稱為updown，播放時長為2秒，動畫方式是先加速后減速，無限循環播放。

通過CSS動畫上下游動效果，網頁設計可以更加生動有趣，吸引用戶的關注。