随着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 |
简写属性,用于在一个属性中设置四个过渡属性。 |
3 |
|
规定应用过渡的 CSS 属性的名称。 |
3 |
|
定义过渡效果花费的时间。默认是 0。 |
3 |
|
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
|
规定过渡效果何时开始。默认是 0。 |
3 |