CSS3是目前最流行的网页设计技术之一，它可以帮助用户实现各种酷炫的动画效果。其中之一就是设置一个滑动的动画效果，让页面更加有吸引力。接下来，我们就一起来看看如何设置一个滑动的动画吧：

.slide {
position: relative;
animation-name: slide-in;
animation-duration: 1s;
}
@keyframes slide-in {
0% { top: -100px; }
100% { top: 0; }
}

代码的解释：

1.定义一个class名称为slide并设置position为relative。因为我们要在这个元素上实现一个相对定位的动画效果。

2.使用animation-name属性来定义动画名称。这个名称必须与下面的@keyframes属性所对应。

3.使用animation-duration属性来定义动画持续时间。这里我们将动画的持续时间设置为1秒。

4.添加@keyframes属性定义动画中的每一帧。我们这里将元素从上往下移动100px，再滑动回来。

通过这段代码，我们可以让一个元素在页面中实现一个上下滑动的动画效果。如果需要实现其他的动画效果，只需要将@keyframes属性改变为你所需要的动画效果即可。