CSS動畫可以為網頁增添美感，提升用戶的交互體驗。實現一個div滑進滑出的效果，只需要幾行CSS代碼就可以輕松完成。

/* 定義滑入動畫效果 */
.slideIn {
position: absolute;
left: -200px; /* 初始位置 */
transition: left 0.5s ease-in-out;
}
/* 定義滑出動畫效果 */
.slideOut {
position: absolute;
left: -200px; /* 初始位置 */
transition: left 0.5s ease-in-out;
}
/* 鼠標懸停時觸發滑入效果 */
.slideIn:hover {
left: 0; /* 滑入后的位置 */
}
/* 鼠標移出時觸發滑出效果 */
.slideOut:hover {
left: -200px; /* 滑出后的位置 */
}

首先，定義一個具有相對定位的div標簽，這個標簽將作為我們滑進滑出的容器。然后，定義兩個CSS類：slideIn和slideOut。這兩個類分別代表我們的滑入和滑出效果。

定義滑入效果時，通過設置元素初始位置為左側屏幕外，然后設置left屬性的過渡效果為0.5秒，達到滑入效果。

定義滑出效果時，同樣設置元素的初始位置為左側屏幕外，不同的是在hover狀態下將元素移回左側屏幕外形成滑出效果。這里需要注意的是，必須設置元素為絕對定位，才能實現相對于其它元素的滑入滑出效果。

通過以上的CSS代碼，我們就成功實現了一個簡單而實用的div滑進滑出效果，讓網頁交互更加豐富多彩。