CSS過(guò)渡效果可以通過(guò)使用transition屬性來(lái)實(shí)現(xiàn)。transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性改變中設(shè)置四個(gè)過(guò)渡效果：
transition-property: 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱。
transition-duration: 定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。
transition-timing-function: 規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 “ease”。
transition-delay: 規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。
以下是一個(gè)簡(jiǎn)單的例子，假設(shè)我們有一個(gè)方塊，我們想要在其背景顏色改變時(shí)有一個(gè)過(guò)渡效果：
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 2s ease-in-out;
}
.box:hover {
background-color: blue;
}
在這個(gè)例子中，.box元素有一個(gè)紅色的背景。當(dāng)你把鼠標(biāo)懸停在這個(gè)元素上時(shí)，它的背景顏色會(huì)變?yōu)樗{(lán)色。由于我們?yōu)?box設(shè)置了transition: background-color 2s ease-in-out;，所以當(dāng)背景顏色改變時(shí)，會(huì)有一個(gè)持續(xù)2秒的過(guò)渡效果，效果的時(shí)間曲線是”ease-in-out”（先慢后快再慢）。
你可以根據(jù)需要調(diào)整transition屬性的值，以實(shí)現(xiàn)不同的過(guò)渡效果。