CSS3使用transition屬性實現(xiàn)過渡效果

2024-07-11 08:31:47

字體：大中小

供稿：網(wǎng)友

屬性詳解

transition屬性目的是讓css的一些屬性（如background）的以平滑過渡的效果出現(xiàn)。它是一個合并屬性，是由以下四個屬性組合而成：

transition-property：設(shè)置應(yīng)用過渡的CSS屬性，如background。 transition-duration：設(shè)置過渡效果花費的時間。默認是 0。 transition-timing-function：設(shè)置過渡效果的時間曲線。默認是 "ease"。 transition-delay：規(guī)定過渡效果何時開始。默認是 0。

示例：

button{ transition: background 1s; -webkit-transition: background 1s; /* Safari */ }

定義transition屬性時，transition-property和transition-duration是必選，其他兩個為可選。

transition-property和transition-duration

transition-property用來指定應(yīng)用過渡效果的CSS屬性，這些屬性包括（可能不全）：

width height color background (color, image, position) transform (in the next post) border (color, width) position (top, bottom, left, right ) text (size, weight, shadow, word-spacing) margin padding opacity visibility z-index all

transition-duration屬性用來設(shè)置指定屬性的過渡效果花費時間，可以是秒（s）或者毫秒（ms）。

transition-delay和transition-timing-function

transition-delay用來設(shè)置過渡效果開始的時間，默認為0，可以是秒（s）或者毫秒（ms）。如果transition-delay是負數(shù)，表示過渡效果提前開始。

transition-timing-function用來設(shè)置過渡的效果，這些效果包括：

ease - 開始慢，中間快，結(jié)束慢 ease-in - 漸入效果，慢入快出 ease-out - 漸出效果，快入慢出. ease-in-out - 開始慢和結(jié)束慢 cubic-bezier(n,n,n,n) - 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值

示例：

button{ transition: background 1s ease-in-out 2s; -webkit-transition: background 1s ease-in-out 2s; /* Safari */ }

多屬性

對于多個屬性，各個屬性的效果以逗號隔開：

button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。

Safari 支持替代的 -webkit-transition 屬性。

Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

觸發(fā)

需要注意的是，過渡效果是需要之前已經(jīng)定義好了屬性，過渡效果通過觸發(fā)來應(yīng)用，比如:hover, :focus, and :active等。

總結(jié)