在網頁中，我們有時會用一些動畫效果來提升用戶體驗，其中之一就是從頁面邊緣滑入的效果。下面，我們來學習如何用CSS實現屏幕左邊滑出的效果。

/* CSS代碼開始 */
.slideInLeft{
animation-name: slideInLeft; /*動畫名稱*/
animation-duration: 1s; /*動畫持續時間*/
animation-timing-function: ease-out; /*動畫速度曲線*/
}
@keyframes slideInLeft {
from {
transform: translateX(-100%); /*起始位置*/
opacity: 0; /*起始不透明度*/
}
to {
transform: translateX(0); /*結束位置*/
opacity: 1; /*結束不透明度*/
}
}
/* CSS代碼結束 */

上面的代碼中，我們首先定義了一個名為slideInLeft的動畫類，然后通過keyframes定義了從屏幕左側滑入的動畫效果。在這個動畫中，我們使用了translateX來實現元素的水平位移，在起始位置設置為-100%的水平距離，目的是讓元素完全位于屏幕的左側，看不見。在結束位置設置為0的水平距離，使元素滑動到屏幕中央，從而實現滑動的效果。

同時，我們還設置了opacity屬性來控制元素的不透明度，從而讓元素在滑動過程中逐漸顯現。為了使動畫效果更加流暢，我們還通過animation-timing-function屬性來設置速度曲線，這里我們使用了ease-out，即先快后慢，讓元素滑動到屏幕中央時速度逐漸變慢。

最后，我們只需要將動畫類應用于需要滑入的元素上，即可實現屏幕左邊滑出的效果。