CSS過渡是一種在CSS屬性發生變化時添加動畫效果的技術。通過定義CSS屬性的起始狀態和終止狀態以及過渡時間等屬性，可以實現許多酷炫的動畫效果。下面我們來看一個簡單的例子：

.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease;
}
.box:hover{
width: 200px;
}

這段代碼定義了一個class為box的元素，初始寬高為100px，背景色為紅色，并在width屬性上定義了過渡時間為1秒。當鼠標滑過.box元素時，寬度將逐漸從100px變化到200px，過程中呈現平滑的動畫效果。

可以通過transition屬性來定義過渡效果的時間、速度曲線和延遲時間。默認情況下，過渡效果是線性的，可以通過ease、ease-in、ease-out、ease-in-out等速度曲線值來改變過渡效果的快慢。

.box{
transition: width 1s ease-in-out 0.5s;
}

在這個例子中，過渡效果的時間為1秒，速度曲線為ease-in-out，延遲0.5秒開始。

除了width屬性外，還可以使用其他屬性實現更加復雜的動畫效果。

.box{
transition: transform 1s ease;
}
.box:hover{
transform: rotate(360deg);
}

在這個例子中，當鼠標滑過.box元素時，它將以中心位置為基點逆時針旋轉360度，實現立體的動畫效果。

CSS過渡技術不僅可以應用在簡單的元素屬性變化上，還可以結合JavaScript實現更加復雜的交互效果。希望通過這篇文章，讀者可以更深入地了解CSS過渡技術的應用和優化方案。