CSS3中Transition屬性詳解以及示例分享

2021-07-03 05:16:45 字數 1544 閱讀 7972

1、transition-property的語法

[css]

transition-property :all(所有屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變)

2、transition-property的屬性值

(1)none:transition馬上停止執行

(2)all:元素產生任何屬性值變化時都將執行transition效果

(3)attr:指定要運動的樣式

一、transition-property——指定要運動的樣式

1、transition-property的語法

[css]

transition-property :all(所有屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變)

2、transition-property的屬性值

(1)none:transition馬上停止執行

(2)all:元素產生任何屬性值變化時都將執行transition效果

(3)attr:指定要運動的樣式

二、transition-duration

transition-duration是指定元素轉換過程的持續時間,單位為秒(s)。transition-duration可以作用於所有元素,包括:before和:after

偽元素。其預設值是0,也就是變換時是即時的。

三、transition-delay—— 延遲時間

transition-delay是用來指定乙個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,單位為s(秒)

,其使用和transition-duration極其相似,也可以作用於所有元素,包括:before和:after偽元素。 預設大小是"0",也就是變換立即執行,

沒有延遲。

四、transition-timing-function——指定運動形式

transition-timing-function : ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速然後減

速) | cubic-bezier(該值允許你去自定義乙個時間曲線)(number, number, number, number>)

五、transition的綜合寫法

[css]

元素選擇器

六、transition的綜合相容寫法

1、mozilla核心

[css]

元素選擇器

2、webkit核心

[css]

元素選擇器

3、opera核心

[css]

元素選擇器

4、w3c 標準

[css]

元素選擇器

例項效果:

複製**

**如下:

a

css3中transition屬性詳解

transform呈現的是一種變形結果,而transation呈現的是一種過渡,通俗點說就是一種動畫轉換過程,如漸顯 漸弱 動畫快慢等。transition和transform是兩種不同的動畫模型。1.transition過渡屬性 transition 屬性是乙個簡寫屬性,用於設定四個過渡屬性 語法...

css3中transition屬性詳解

transform呈現的是一種變形結果,而transation呈現的是一種過渡,通俗點說就是一種動畫轉換過程,如漸顯 漸弱 動畫快慢等。transition和transform是兩種不同的動畫模型。1.transition過渡屬性 transition 屬性是乙個簡寫屬性,用於設定四個過渡屬性 語法...

css3中的過渡(transition)

css3 transition 過渡 1.語法 transition transition property transition duration transition timing function transition delay transition property 檢索或設定物件中的參與...