CSS左側滑出動畫是一種常見的Web頁面過渡效果，可以為用戶提供更加流暢的用戶體驗。下面介紹如何使用CSS制作一個簡單的左側滑出動畫。

.slideleft {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background-color: #fff;
transition: all 0.3s ease;
}
.slideleft.active {
left: 0;
}

首先，我們需要定義一個CSS選擇器，命名為slideleft。使用position: fixed將元素固定在頁面的左側，并設置left屬性為-300px，使元素完全隱藏在頁面之外。接著，我們給它設定一個寬度和高度，并設置背景顏色為白色。最后，我們給這個元素添加CSS過渡效果，設置過渡持續(xù)時間為0.3秒，并采用ease緩動函數(shù)，使過渡更加平滑。

接下來，我們需要給.slideleft添加另一個CSS樣式，命名為active。當我們需要讓元素滑入頁面時，就切換到這個狀態(tài)，設置left為0，讓它從左側滑入頁面。

var element = document.querySelector('.slideleft');
element.classList.add('active');

最后，我們通過JavaScript來激活這個動畫效果。使用querySelect獲取.slideleft元素，然后調用classList.add方法來將.active類名添加到.slideleft元素身上，就能夠讓元素以動畫的形式滑入頁面了。