CSS3是一種非常強(qiáng)大的前端開發(fā)語言，它提供了許多豐富的效果和功能來改善網(wǎng)頁的用戶體驗。其中，左邊淡入淡出效果是非常常用的一種動畫效果，通過設(shè)置CSS3屬性，可以輕松實現(xiàn)這種效果。

.slide-in {
opacity: 0;
transform: translateX(-100%);
transition: all .5s ease-in-out;
}
.slide-in.active {
opacity: 1;
transform: translateX(0);
}

以上代碼是實現(xiàn)左邊淡入淡出效果的核心部分，其中，opacity屬性控制透明度，transform屬性控制元素的位置移動，transition屬性控制動畫的過渡時間和動畫效果。

下面我們使用一個例子來演示這個效果。

<div class="slide-in">
<p>這是一個測試文字</p>
</div>

以上代碼是創(chuàng)建元素的代碼，我們通過在元素上添加slide-in類，并使用active類來開啟動畫效果。

const slider = document.querySelectorAll(".slide-in");
function checkSlide(e) {
slider.forEach(slide =>{
const slideInAt = (window.scrollY + window.innerHeight) - slide.clientHeight / 2;
const slideBottom = slide.offsetTop + slide.clientHeight;
const isHalfShown = slideInAt >slide.offsetTop;
const isNotScrolledPast = window.scrollY< slideBottom;
if (isHalfShown && isNotScrolledPast) {
slide.classList.add("active");
} else {
slide.classList.remove("active");
}
});
}
window.addEventListener("scroll", checkSlide);

以上代碼是通過JavaScript對元素添加滾動監(jiān)聽，當(dāng)元素進(jìn)入視圖中心時，自動開啟動畫效果。通過調(diào)用checkSlide()函數(shù)，來遍歷所有具有slide-in類的元素，并根據(jù)元素位置的狀態(tài)來設(shè)置active類是否添加。

CSS3左邊淡入淡出是一種非常流行的動畫效果，通過控制CSS3屬性，能夠輕松實現(xiàn)這種效果。同時，結(jié)合JavaScript來實現(xiàn)滾動監(jiān)聽，能夠讓動畫效果更加自然和流暢。