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