在網站設計中，動畫效果的運用可以帶來更好的用戶體驗。今天，我們來學習一種常用的 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 創建從右側滑動到左側的動畫效果，為網站注入更多生機與活力。