·您当前的位置:首页 > 技术教程 > 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,就不会产生过渡效果。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器