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