CSS過渡效果是一種可以讓網(wǎng)頁(yè)元素從一個(gè)狀態(tài)逐漸過渡到另一個(gè)狀態(tài)的方式。使用CSS過渡效果，不僅可以提升網(wǎng)頁(yè)的視覺效果，還可以提高用戶對(duì)網(wǎng)頁(yè)的體驗(yàn)。

那么，如何讓CSS過渡效果自動(dòng)觸發(fā)呢？以下是一個(gè)使用CSS過渡效果實(shí)現(xiàn)圖片自動(dòng)滑動(dòng)的示例：

<style>
.slide {
position: relative;
height: 100px;
overflow: hidden;
}
.slide img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all 1s;
}
.slide img.active {
opacity: 1;
}
</style>
<div class="slide">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<script>
let slideIndex = 0;
const slides = document.querySelectorAll(".slide img");
setInterval(() => {
slideIndex++;
if (slideIndex == slides.length) {
slideIndex = 0;
}
slides.forEach((slide) => {
slide.classList.remove("active");
});
slides[slideIndex].classList.add("active");
}, 3000);
</script>

這個(gè)示例中，我們首先為包含圖片的元素添加了一個(gè)類名slide，并設(shè)置了該元素的高度為100px，并且設(shè)置overflow屬性為hidden，以便隱藏超出元素高度的部分。接著，我們給圖片設(shè)置position屬性為absolute，寬度和高度都設(shè)置為100%，opacity屬性設(shè)置為0，表示圖片默認(rèn)不可見，同時(shí)為其添加了一個(gè)過渡效果，時(shí)長(zhǎng)為1s。

為了讓圖片自動(dòng)滑動(dòng)，我們使用了JavaScript編寫了一個(gè)定時(shí)器，并使用了classList屬性和add方法和remove方法配合，來實(shí)現(xiàn)將前一張圖片的active類名移除，同時(shí)添加給下一張圖片的active類名，使其顯示在頁(yè)面中。

通過這個(gè)示例，我們可以看到如何使用CSS過渡效果和JavaScript編寫一個(gè)自動(dòng)滑動(dòng)的圖片輪播。當(dāng)然，我們還能使用CSS過渡效果實(shí)現(xiàn)其它自動(dòng)效果，如自動(dòng)展開折疊卡片、自動(dòng)切換標(biāo)簽頁(yè)等等。只需要結(jié)合JavaScript編寫適當(dāng)?shù)哪_本，就可以輕松實(shí)現(xiàn)各種自動(dòng)效果。