CSS3 transition详解

D3 Transitions
简介：
Css 的transition属性可以使CSS的值在一段时间内平滑的变化。
Transition：
一般情况下，当CSS值发生变化时，其渲染结果会立刻发生变化。而这个transition新属性可以将这一变化在一段时间内缓慢过渡。
#transition01{

position: absolute;

left:0px;

width:200px;

height:200px;

background-color:#f00;

transition-property: background-color,left;

transition-duration: 1s,4s;

}

#transition01:hover{

left:200px;

background-color:#fff;

}
正如上面的例子，在响应的css发生变化的时候，会产生过渡效果。注意transition-property属性以及transition-duration所用时间的对应关系。
0、如果说不指定property值的话，默认值为all，即所有属性
1、一个时间即是统一指定
2、多个时间即是单独指定
3、如果属性比时间多了，就循环从头开始取时间
4、相反，如果时间比属性多了，多写的时间也就没了作用了。



接下来的有transition-time-function：该属性控制属性过渡的快慢变化。该属性的函数无非有两种，一种是step函数，另一种是贝塞尔曲线。下面的曲线叫做贝塞尔曲线，贝塞尔曲线有两个关键的点。一个是P1，一个是P2
.两个点对应4个坐标。





上面是贝塞尔的代名词。
     Ease：首尾变缓。
     Linear：线性变化。
     Ease-in：开始慢，后面快。
     Ease-out：开始块，后面慢。
     Ease-in-out：首尾慢，中间快。
然而step函数是将过渡效果平分成几等分。这一类有三种函数step-start,step-end以及steps函数。



Step-start：是一开始就有效果，直到结束
Step-end：是一开始没效果，一直到结束了才有效果。



而steps函数的细节如下：
Steps(5,start)的意思是，第一阶段开始就开始变化。
Steps(5,end)的意思是，第一阶段结束才开始变化。



最后一个是自定义的贝塞尔曲线。
 
上面讲完了动画的变化效果。
接下来讲一下延迟。
 
Transition-delay：1s;
Transition-delay与transition-duration一样，可以写1个或者多个时间对应transition-property
 
此外，除去以上介绍的transition为前缀的一些属性之外，还有一个单独的transition属性。该属性是针对单一属性的动画效果设计的。
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
一下两种写法都是一样的，时间的位置是一样的。
transition:width 1s ease;
transition:width ease 1s;
 

总结如下。