在CSS中，`transition`是一種用于實(shí)現(xiàn)元素狀態(tài)過(guò)渡效果的屬性。它允許您指定元素在不同狀態(tài)之間平滑過(guò)渡的樣式屬性，并控制過(guò)渡的持續(xù)時(shí)間、延遲和過(guò)渡函數(shù)。
`transition`屬性的語(yǔ)法如下：
transition: property duration timing-function delay;- `property`：指定要過(guò)渡的樣式屬性，可以是一個(gè)或多個(gè)屬性，用逗號(hào)分隔。
- `duration`：指定過(guò)渡的持續(xù)時(shí)間，以秒或毫秒為單位。
- `timing-function`：指定過(guò)渡的時(shí)間函數(shù)，控制過(guò)渡的速度曲線(xiàn)，常見(jiàn)的值包括 `ease`(默認(rèn)值)、`linear`、`ease-in`、`ease-out`、`ease-in-out` 等。
- `delay`：指定過(guò)渡開(kāi)始前的延遲時(shí)間，以秒或毫秒為單位。
以下是一個(gè)示例，演示了一個(gè)元素在鼠標(biāo)懸停時(shí)改變背景顏色的過(guò)渡效果：
div {
background-color: blue;
transition: background-color 0.3s ease;
}
div:hover {
background-color: red;
}在上述示例中，`div` 元素的背景顏色在0.3秒內(nèi)平滑過(guò)渡，并應(yīng)用了默認(rèn)的時(shí)間函數(shù) `ease`。當(dāng)鼠標(biāo)懸停在元素上時(shí)，背景顏色從藍(lán)色過(guò)渡到紅色。
京公網(wǎng)安備 11010802030320號(hào)