CSS3中提供了豐富的動畫效果，其中滑出滑入是常見的一種。滑出滑入可以是元素從頁面上方、下方、左側或右側滑出或滑入。這種效果可以讓網頁更加生動有趣，并提高用戶體驗。

@keyframes slide-in-from-top {
0% {transform: translateY(-100%);}
100% {transform: translateY(0);}
}
.slide-in {
animation: slide-in-from-top 0.5s ease-out;
}

以上代碼實現了從頁面頂部滑入的效果。首先定義了一個名為slide-in-from-top的關鍵幀動畫，從頂部（translateY(-100%)）到頁面頂部（translateY(0)）進行變化。然后，.slide-in類使用該動畫，并制定了動畫執行的時間和過度方式為ease-out。

@keyframes slide-in-from-right {
0% {transform: translateX(100%);}
100% {transform: translateX(0);}
}
.slide-in-right {
animation: slide-in-from-right 0.5s ease-out;
}

以上代碼實現了從頁面右側滑入的效果。與之前的代碼類似，這里定義了一個名為slide-in-from-right的關鍵幀動畫，從右側（translateX(100%)）到頁面左側（translateX(0)）進行變化。然后使用.slide-in-right類應用該動畫。

其他方向的滑出滑入效果同理，只需要改變動畫的方向和元素的位置就可以了。使用CSS3的滑出滑入效果，可以為網頁添加更多的動態特效，提高用戶體驗。