transition过渡效果

transition:过渡，转变，变迁。

过渡效果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，就像

#content

{ transition: width 2s, height 2s, background 2s; }

过度效果的延迟加载 transition-delay

#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

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;
}

这样就给过渡加上了速率变化。