/*** Transition ***/
transition有四个属性,分别是:transition-property;transition-duration;transition-timing-function;transition-delay每个属性都是独立的。
transition-property:检索或设置对象中的参与过渡的属性
transition-duration:检索或设置对象过渡的持续时间
transition-timing-function:检索或设置对象过渡的动画类型
此属性有6个可能的值:ease(逐渐变慢);linear(匀速);ease-in(加速);ease-out(减速);ease-in-out(加速然后减速);cubic-bezier(允许自定义时间曲线)。
transition-delay:检索或设置对象延迟过渡的时间。
兼容写法:
//Mozilla 内核
-moz-transition:all 0.5s ease-in 1s;
// Webkit 内核
-webkit-transition:all 0.5s ease-in 1s;
// Opera 内核
-o-transition:all 0.5s ease-in 1s;
// W3C标准
transition:all 0.5s ease-in 1s;
使用transition功能同时平滑过渡多个属性值:
例子:
div{
background-color:#ffff00;color:#000;width:300px;
-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
-o-transition:background-color 1s linear,color 1s linear,width 1s linear;
-moz-transition:background-color 1s linear,color 1s linear,width 1s linear;
}
div:hover{background-color:#003366;color:#fff;width:400px;}
<div>示例文字</div>
在1秒内,将元素的背景,字体,宽度进行平滑过渡。
注:谷歌内核的浏览器,在写transition时候,写的手法是和其它内核不一样。
-webkit-transition:all ease 4s;
-moz-transition:transform 4s ease 0s;
-o-transition:transform 4s ease 0s;
transition:transform 4s ease 0s;