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动画上下游动效果，网页设计可以更加生动有趣，吸引用户的关注。