css上下移动循环动画效果

CSS上下移动循环动画是一种常见的网页动效，能够增加网页的活力，使其更加吸引人。下面将介绍如何实现此种动画效果。

.move {
    animation: move 2s infinite;
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
} 

首先，我们使用CSS的@keyframes关键字定义一个名为move的动画。其中0%、50%、100%分别代表动画开始时、中间时和结束时的状态。

在0%状态下，我们使用transform属性对元素进行坐标变换，将其沿着y轴方向向上移动0px。在50%状态下，将元素移动了-20px，表示元素从初始位置向上移动了一段距离。最后，在100%状态下，将元素的位移复原，即使元素回到原始位置，完成一次周期的动画。

然后，我们将这个动画通过animation关键字应用到某个HTML元素上，设置动画的时长以及循环次数。例如，使用.move类名为元素添加动画效果，设置动画时长为2s，无限循环。

总之，使用CSS上下移动循环动画可以让网页更加生动，吸引观众的眼球，为网页添加更多活力。