CSS3中的transition属性详解

Transition属性主要是用来对某个CSS属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。理解为”在某个时间段内，平滑地改变某个CSS属性。“。

 

Transition又包含了四个子属性，分别为property、duration、timing-function、delay

 

1. transition-property:

property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值background。

 

2. transition-duration:

duration针对了过渡效果的持续时间。

 

3. transition-timing-function:

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但W3C给出了一张曲线图，一看就明白了（后附图）。

 

介绍下预留的几个特效：
ease: 默认值（先快后慢）
linear: 匀速
ease-in: 先慢后快
ease-out: 先快后慢
ease-in-out: 先慢后快后慢
cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]

其中的cubic-bezier即为貝茲曲線中的绘制方法

图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的

 

4. transition-delay:

duration针对了过渡效果的延迟执行时间。

 

5. 代码演示：

1). 过渡单个属性：

 

[html] view plain copy  

1. transition-property:opacity;  
2. transition-duration:2s;  
3. transition-timing-function:ease-in;  
4. transition-delay:0;  

 

2). 过渡多个属性：

[1]. 上下一一对应型：

 

[html] view plain copy  

1. transition-property:opacity left;  
2. transition-duration:2s, 4s;  
3. transition-timing-function:ease-in;  
4. transition-delay:0;   

此时：opacity过渡时间为2s，left过渡时间为4s。

 

 

[2]. 循环对应型：

 

[html] view plain copy  

1. transition-property:opacity left width height;  
2. transition-duration:2s, 4s;  
3. transition-timing-function:ease-in;  
4. transition-delay:0;   

 

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

 

 

3). transition简写模式：
顺序为：transition-property transition-duration transition-timing-function transition-delay 

 

[html] view plain copy  

1. /*单个属性：*/  
2. -moz-transition:background 0.5s ease-out 0s;  
3. /*多个属性：*/  
4. -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-   out 0s;