欢迎来到鲍余网络官网 官方微信 官方微博 IDC网站
深圳网站建设官方微信

网络之路,从这里开始

热线电话

18576678080 / 0755-85278776

网站知识
首页 > 网站知识 > css的transition过渡属性

css的transition过渡属性

  • 所属分类: 网站知识
  • 发布时间:2015-06-19 11:40:54
  • 作者: 鲍余网络
  • 点击量:

随着HTML5和css3的完美结合,flash已然渐渐被取代,HTML5和css3的完美融合也意味着网页设计又往前迈了一大步,今天我们就来说说css3的属性之一—transition(过渡)属性。

当你看到网页上出发鼠标move动作时变换的美丽效果时,很有可能已经不再是flash了,仅仅是transition一句代码就能搞定。通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

它如何工作?

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

实例

应用于宽度属性的过渡效果,时长为 2 秒:

div{transition: width 2s;-moz-transition: width 2s;/* Firefox 4 */-webkit-transition: width 2s;/* Safari 和 Chrome */-o-transition: width 2s;/* Opera */}

注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:

实例

规定当鼠标指针悬浮于 <div> 元素上时:

div:hover{width:300px;}

 

注释:当指针移出元素时,它会逐渐变回原来的样式。

多项改变

如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:

实例

向宽度、高度和转换添加过渡效果:

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

 

过渡属性

下面的表格列出了所有的转换属性:

属性

描述

CSS

transition

简写属性,用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

深圳网站建设:http://www.zgbywl.com

关键词:

相关文章:

有做网站需求?   联系客服经理 提交需求 直接拨打业务电话:0755-85278776