CSS過渡效果是一種可以讓網頁元素從一個狀態逐漸過渡到另一個狀態的方式。使用CSS過渡效果，不僅可以提升網頁的視覺效果，還可以提高用戶對網頁的體驗。

那么，如何讓CSS過渡效果自動觸發呢？以下是一個使用CSS過渡效果實現圖片自動滑動的示例：

<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>

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

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

通過這個示例，我們可以看到如何使用CSS過渡效果和JavaScript編寫一個自動滑動的圖片輪播。當然，我們還能使用CSS過渡效果實現其它自動效果，如自動展開折疊卡片、自動切換標簽頁等等。只需要結合JavaScript編寫適當的腳本，就可以輕松實現各種自動效果。