标签：style blog color io ar strong sp div on
transition:过渡，转变，变迁。
transition是CSS3新增的样式，有四个属性值: 执行变换的属性(transition-property) 变换延续的时间(transition-duration) 变换的速度变化(transition-timing-function) 变换延迟时间(transition-delay);
下面给出范例
<!-- 这是一个范例程序 --> <div id="content"></div>
CSS代码
/* 给DIV加入一些样式，使能够直观的观察 */ div{ background: green; width: 120px; height: 120px; } /* transition定义 注意各浏览器对该属性的实现方式有所区别，IE暂不支持该属性 */ #content{ -webkit-transition: width 2s; -moz-transition: width 2s; -o-transition: width 2s; transition: width 2s; } /* 现在定义鼠标划过div时的变化 */ #content:hover{ width: 300px; }
此时当鼠标悬停在div时，他的宽度不是biu的一下就变为300px,而是有2s的过的时间，鼠标撤出div范围时，也经过2s的时间变回原来的宽度。
如果要对多个属性进行过渡效果，对玩过CSS的人来说肯定不会陌生，多个属性间用逗号分隔就OK，就像
{ transition: width 2s, height 2s, background 2s; }
#content{ -webkit-transition-property: width; /* 设定过度属性为width */ -moz-transition-property: width; -o-transition-property: width; transition-property: width; -webkit-transition-duration: 2s; /* 设定过度时间为2s */ -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-delay: 3s; /* 设定延迟时间为3s */ -moz-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; }
此时观看到的效果是鼠标悬停在div上时，先停顿3s的时间在进行宽度的变化。
transition-timing-function有五个属性值：
ease 逐渐变慢（默认值）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速然后减速
/* 给上面的过渡效果在加上速率变化 */ #content{ -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; }
这样就给过渡加上了速率变化。
标签：style blog color io ar strong sp div on
原文地址：http://www.cnblogs.com/hyhl23/p/4027873.html
