CSS3 過(guò)渡(Transition)動(dòng)畫屬性可以讓元素在改變樣式時(shí)產(chǎn)生平滑的過(guò)渡效果。以下是常用的 CSS3 過(guò)渡動(dòng)畫屬性:
transition-property:指定要應(yīng)用過(guò)渡效果的 CSS 屬性名稱,可以是單個(gè)屬性或多個(gè)屬性,多個(gè)屬性之間用逗號(hào)分隔。
transition-duration:指定過(guò)渡效果的持續(xù)時(shí)間,以秒(s)或毫秒(ms)為單位。
transition-timing-function:指定過(guò)渡效果的時(shí)間曲線函數(shù),控制過(guò)渡期間屬性值的變化速度。常用的時(shí)間曲線函數(shù)包括:linear(線性變化)、ease(緩慢開始,然后加速)、ease-in(緩慢開始)、ease-out(緩慢結(jié)束)、ease-in-out(緩慢開始和結(jié)束)等。
transition-delay:指定過(guò)渡效果的延遲時(shí)間,在過(guò)渡開始之前等待一段時(shí)間,以秒(s)或毫秒(ms)為單位。
這些屬性可以通過(guò)使用 transition 縮寫屬性進(jìn)行一次性設(shè)置。例如:
.element {
transition: width 1s ease-in-out;
}
上述代碼將應(yīng)用一個(gè)持續(xù)時(shí)間為 1 秒、時(shí)間曲線函數(shù)為緩慢開始和結(jié)束的過(guò)渡效果,作用于元素的寬度屬性。
除了上述屬性,還有其他一些過(guò)渡動(dòng)畫屬性可用于更詳細(xì)的控制過(guò)渡效果,例如:
transition-property:指定過(guò)渡效果應(yīng)用于哪些 CSS 屬性。
transition-duration:指定過(guò)渡效果的持續(xù)時(shí)間。
transition-timing-function:指定過(guò)渡效果的時(shí)間曲線函數(shù)。
transition-delay:指定過(guò)渡效果的延遲時(shí)間。
這些屬性的組合可以創(chuàng)建各種復(fù)雜的過(guò)渡動(dòng)畫效果,讓元素的樣式變化更加平滑和生動(dòng)。
請(qǐng)注意,CSS3 過(guò)渡動(dòng)畫屬性需要瀏覽器的支持,不同瀏覽器可能有不同的前綴,如 -webkit-transition、-moz-transition 等,以確保在不同瀏覽器中獲得一致的效果。