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