王新阳

wangxinyang

CSS3之transition

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition主要包含四个属性值:
transition-property 执行变换的属性
transition-duration 变换延续的时间,单位s、ms
transition-timing-function 变化速率:ease变慢、linear匀速、ease-in加速、ease-out减速、ease-in-out
transition-delay 变换延迟时间

例:
transition: all 0.5s ease-in;
transition: all 0.5s ease-in 100ms;
指定属性变化时执行:
transition: background 0.5s ease-in, color 0.3s ease-out;

浏览器兼容写法:
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;

来源:http://www.w3cplus.com/content/css3-transition

2015-08-02
2024-11-23 星期六 农历十月二十三