CSS過渡效果是現代網頁設計的重要一環，可以通過改變某個元素的樣式來實現動畫效果。本文將介紹如何使用CSS過渡效果實現從下往上的過渡效果。

/* 定義初始樣式 */
.transition {
opacity: 0;
transform: translateY(50px);
}
/* 定義過渡樣式 */
.transition.active {
opacity: 1;
transform: translateY(0);
/* 過渡效果 */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

以上代碼中，“.transition”類定義了初始狀態下被過渡的元素的樣式，包括元素的透明度和垂直方向上的偏移量。最后，“.transition.active”類定義了元素被激活后的樣式，即透明度為1，不偏移，同時通過“transition”屬性來定義過渡效果。

為了讓過渡效果生效，我們需要使用JavaScript來為元素添加/移除“active”類：

// 獲取要過渡的元素
var element = document.getElementById("target-element");
// 當元素進入視口時觸發
function handleIntersection(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// 如果元素進入視口，則添加“active”類
element.classList.add("active");
} else {
// 如果元素還未進入視口，則移除“active”類
element.classList.remove("active");
}
});
}
// 創建IntersectionObserver對象，監視元素是否進入視口
var observer = new IntersectionObserver(handleIntersection, {});
// 將目標元素傳遞給IntersectionObserver對象
observer.observe(element);

以上代碼中，“IntersectionObserver”對象用于監視指定元素是否進入視口，如果進入，則為目標元素添加“active”類，觸發過渡效果。

通過以上步驟，我們就可以使用CSS過渡效果實現從下往上的過渡效果了。