在网站设计中，动画效果的运用可以带来更好的用户体验。今天，我们来学习一种常用的 CSS 动画效果，滑动动画。其中，以从右滑动到左的效果为例。

/* 添加动画keyframes */
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
/* 定义动画的class */
.slideInRight {
animation-name: slideInRight;
animation-duration: 1s;
animation-fill-mode: both;
}

以上代码中，我们编写了一个名为slideInRight的动画效果。该动画效果从右侧滑动进入页面，运行时间为 1 秒，同时动画结束后会保留在最终状态（即animation-fill-mode: both;）。接下来，我们将该动画效果应用到需要使用的元素中。

/* 添加动画效果 */
.slide {
width: 100px;
height: 100px;
background-color: red;
animation: slideInRight 1s;
}

在上述代码中，我们创建了一个.slide的元素，并为其添加了slideInRight动画效果，运行时间为 1 秒。此时，打开页面后，元素就会从右侧向左移动，实现了滑动动画效果。

当然，除了从右侧向左滑动外，我们还可以根据需求拓展其他方向滑动效果，这里就不一一赘述了。

总之，通过以上的步骤，我们可以轻松使用 CSS 创建从右侧滑动到左侧的动画效果，为网站注入更多生机与活力。