CSS 過渡（transition）是一種簡單、優雅的方式，在 Web 上實現各種動畫效果。更重要的是，它可以幫助我們消除繁瑣的 JavaScript 編程，讓我們更專注于設計和交互體驗的優化。

/* 基本的過渡屬性 */
.box {
transition: all 0.3s ease;
}
/* 多個屬性的過渡效果 */
.box {
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* 自定義過渡曲線 */
.box {
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.9, 0.6);
}
/* 過渡效果延遲 */
.box {
transition: all 0.3s ease 0.5s;
}
/* 過渡效果完成后回到初始狀態 */
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.5);
}
/* 過渡效果不可逆 */
.box {
transition: width 0.3s ease;
}
.box:hover {
width: 200px;
}
.box:active {
width: 100px;
/* 這里并不會觸發過渡效果 */
}

上述代碼展示了基本的 CSS 過渡屬性，包括： all：過渡所有屬性 屬性名：只過渡指定屬性 時間：過渡時間 過渡曲線：用 cubic-bezier 或者類似 ease-in 的關鍵字定義過渡曲線 延遲：定義過渡效果的延遲時間 停留時間：定義過渡效果完成后停留時間

通過對這些屬性和屬性值的調整和組合，我們可以創造出各種各樣的過渡效果。在實際使用中，我們還可以通過 JavaScript 動態修改過渡屬性，實現更加動態的效果。