CSS3中Transition屬性詳解以及範例分享_CSS/HTML

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:運動的樣式 持續時間 運動形式 延遲時間;}

　　六、transition的綜合相容寫法

　　1、Mozilla核心
[css]
元素選擇器{-moz-transition:運動的樣式 持續時間 運動形式 延遲時間;}

　　2、Webkit核心
[css]
元素選擇器{-webkit-transition:運動的樣式 持續時間 運動形式 延遲時間;}

　　3、Opera核心
[css]
元素選擇器{-o-transition:運動的樣式 持續時間 運動形式 延遲時間;}

　　4、W3C 標準
[css]
元素選擇器{transition:運動的樣式 持續時間 運動形式 延遲時間;}

 

實例效果：

複製程式碼 程式碼如下:

a{transition:all .6s escape-in​​-out;-webkit-transition:all .6s escape-in​​-out;-moz- transition:all 。6 秒緩入出；-o-transition：所有 .6 秒緩入出；-ms-transition：所有 .6 秒緩入出；}