css3 transition等属性，持续更新...

1.transition属性：

参考网站：http://www.runoob.com/cssref/css3-pr-transition-timing-function.html

transition属性：

例子：

div
{
    width:100px;
    height:100px;
    background:red;
    transition:width ease 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}

鼠标放在div上将逐渐在2s内该变宽度至300px；

transition属性是一个速记属性有四个属性： transition-property , transition-duration, transition-timing-function,and transition-delay。

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

默认值：all 0 ease 0

js语法: object.style.transition = "width 2s";

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

例子：

div
{
    width:100px;
    height:100px;
    background:red;
    transition:transform 1s ease 1s;
    -webkit-transition:transform 2s ease 1s;
}

div:hover
{
    transform:translate(200px, 0px);
}

当鼠标移在div上，1s延迟后，div向右以ease方式，在2s内，移动200px。

还有transition属性的分解写法：

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: ease;

/* Safari/Chrome */
-webkit-transition-property:width; 
-webkit-transition-duration:2s;
-webkit-transition-delay:2s;
-webkit-transition-timing-function: ease;
}

div:hover
{
    width:300px;
}
</style>

transition-timing-function属性值：属性指定切换效果的速度；此属性允许一个过渡效果，以改变其持续时间的速度；默认值ease；

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

关于速度曲线，以及linear(匀速)、ease-in、ease-out等的用法见参考网站，上面有例子。