·您當前的位置:首頁 > 技術教程 > Html5技術 >

[CSS3]CSS3中transition 屬性與用法

時間:2019-08-20 09:08cuplayer.com
[CSS3]CSS3中transition 屬性與用法,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。

[CSS3]CSS3中transition 屬性與用法

實例

把鼠標指針放到 div 元素上,其寬度會從 100px 逐漸變為 300px:

  1. div 
  2. width:100px; 
  3. transition: width 2s; 
  4. -moz-transition: width 2s; /* Firefox 4 */ 
  5. -webkit-transition: width 2s; /* Safari 和 Chrome */ 
  6. -o-transition: width 2s; /* Opera */ 

瀏覽器支持

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

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

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

定義和用法

transition 屬性是一個簡寫屬性,用于設置四個過渡屬性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注釋:請始終設置 transition-duration 屬性,否則時長為 0,就不會產生過渡效果。

熱門文章推薦

請稍候...

保利威視云平臺-輕松實現點播直播視頻應用

酷播云數據統計分析跨平臺播放器

澳客网竞彩足球比分直