浏览器支持方面:

支持:firefox 4+ ; opera 11+ ; chrome 10+ ; safari 5+;
不支持:IE系列, firfox 3.6

由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以一般都一起写:

-moz-transition: // Firefox 4
-webkit-transition: // Safari
-o-transition: // Opera
transition: //官方标准

属性:

transition-property(变换的属性)
transition-duration(持续时间)
transition-timing-function(动画效果)
transition-delay(延迟时间)

transition-property——用于检索或设置对象中的参与变换的属性
属性值有3类

  • transition-property:all; 表示所有可以进行变换的css属性,也是transition-property属性的默认值
  • transition-property:none; 不指定变换的css属性,当属性值为none时,动画立即停止
  • transition-property:某一具体的属性值; 如color,写法:transition-property:color 表示具体要进行变换的css属性

transition-duration——指定对象变换的持续时间,也可以理解为整个过程需要的时间,常用单位为秒(s)和毫秒(ms), 默认值为0

transition-timing-function——检索或设置对象中变换的动画类型
属性值有6种

  • linear:线性变换。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)(点击了解什么是贝赛尔曲线)
  • ease:平滑变换。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). ease也是transition-timing-function属性的默认值
  • ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  • ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  • cubic-bezier(, , , ):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
    查看动画效果demo

transition-delay——指定对象变换的延迟时间,常用单位为秒(s)和毫秒(ms), 默认值为0

单个属性有多个值存在时,用逗号进行分割,如:
transition-timing-function:ease,ease-in,ease-out;

简例:
-webkit-transition:background-color 2s ease 0,color 3s ease 0;
-moz-transition:background-color 2s ease 0,color 3s ease 0;
-o-transition:background-color 2s ease 0,color 3s ease 0;
transition:background-color 2s ease 0,color 3s ease 0;

一般是通过CSS中的伪类来让一些元素产生简单的交互状态(就像a标签的那些伪类love hate),以方便我们在不同状态时使用transition来达到动画效果。
但是需要注意的是,并不是所有的伪类都能起作用

Hedgehog’s Blog–>鼠标移到这里背景会变颜色

引自:http://xiep.net/2011/06/14/css3-transition.html/

© 2012 Hedgehog Suffusion theme by Sayontan Sinha