css3上下循环缓动效果

CSS3的动画效果丰富多彩，其中上下循环缓动效果是很实用和常用的。这种效果可以让元素在一定时间内上下循环移动，给网页带来更加生动的视觉效果。下面我们就来看看如何实现这种效果。

/*首先定义类名*/
.move{
position:relative;
/*设置动画时间*/
animation:moveUpDown 2s ease-in-out infinite;
}
/*下面是动画关键帧*/
/*from代表动画起始状态，to代表动画结束状态*/
@keyframes moveUpDown {
from {top: 0px;}
to {top: 100px;}
}

以上代码中，我们定义了一个类名为move的元素，给它设定了position:relative属性，然后给它加上了一个动画效果。动画名称为moveUpDown，时间为2秒，缓动方式为ease-in-out，最后加上了一个infinite属性使动画无限循环。

接着，我们在动画关键帧中定义了开始状态和结束状态。从开始状态top:0px，即将元素向下移动0像素。接着，动画移动到结束状态top:100px，即将元素向下移动100像素。这样就实现了一个不断向上下循环移动的动画效果。

查看更多关于css3上下循环缓动效果的详细内容...