CSS3变化过度类型有哪些（transition-timing-function每种过渡类型一个实例）

　　CSS3中的对象过度效果属性 transition 有四个值由用户设置，其中有一个为 transition-timing-function，它是用来设置元素对象的状态变化过渡类型的，也就是对象从一种状态过渡到另一种状态的变化方式，可供选择的过渡类型有近10种，大部分直接用就行了，有一个需要设置具体的参数。

　　transition-timing-function 的语法规则比较简单，大多是直接填一个现成的过渡效果；以下是它的语法规则和可选择的变化过渡类型以及具体的实例。

 

　　一、transition-timing-function语法规则

　　transition-timing-function：<single-transition-timing-function>[, <single-transition-timing-function> * ]

　　<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end |

steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

 

 

　　二、语法说明

　　1、transition-timing-function 可以设置多组过渡效果，默认值为 ease

　　A、<single-transition-timing-function> 表示第一组过渡效果，不能省略；

　　B、[]中的 <single-transition-timing-function> 表示第二组过渡，可以省略；

　　C、* 表示第三组、第四组、……第n组过渡效果，可以省略；

 

　　2、<single-transition-timing-function> 取值如下：

　　ease：平滑过渡，相当于贝塞尔曲线（0.25, 0.1, 0.25, 1.0）
　　linear：线性过渡，相当于贝塞尔曲线（0.0, 0.0, 1.0, 1.0）

　　ease-in：由慢到快，相当于贝塞尔曲线（0.42, 0, 1.0, 1.0）
　　ease-out：由快到慢，相当于贝塞尔曲线（0, 0, 0.58, 1.0）
　　ease-in-out：由慢到快再到慢，相当于贝塞尔曲线（0.42, 0, 0.58, 1.0）

　　step-start：相当于 steps(1, start)
　　step-end：相当于 steps(1, end)

　　steps(<integer>[, [ start | end ] ?])：接受两个参数的步进函数。
　　<integer>必须为正整数，指定函数的步长，不能省略；
　　第二个参数：可以为 start 或 end，默认值为end，指定每一步的值发生变化的时间点，可以省略。

　　cubic-bezier(<number>, <number>, <number>, <number>)：自定义贝塞尔曲线类型，4个数值必须在[0, 1]区间内。

 

　　三、transition-timing-function 每种过渡类型一种实例

　　实例中由于每个元素都要运动，所以一定要设置初始位置，不然运动不起来；例如：设置运动实例（transition-property）为left，则需设置元素离左边的距离，如实例中的 left:0px。

　　html代码：

　　<ul class="transition-timing-function">
　　　<li class="ease">平滑过度（ease）：<br />transition-timing-function:ease;</li>

　　　<li class="linear">线性过度（linear）：<br />transition-timing-function:linear;</li>
　　　<li class="ease-in">由慢到快（ease-in）：<br />transition-timing-function:ease-in;</li>
　　　<li class="ease-out">由快到慢（ease-out）：<br />transition-timing-function:ease-out;</li>
　　　<li class="ease-in-out">由慢到快再到慢（ease-in-out）：<br />transition-timing-function:ease-in-out;</li>
　　　<li class="step-start">步进函数（step-start）：<br />transition-timing-function:step-start;</li>

　　　<li class="step-end">步进函数（step-end）：<br />transition-timing-function:step-end;</li>
　　　<li class="steps">步进函数（steps）：<br />transition-timing-function:steps(2, start);</li>
　　　<li class="steps-end">步进函数（steps）：<br />transition-timing-function:steps(5, end);</li>
　　　<li class="cubic-bezier">自定义贝塞尔曲线类型（cubic-bezier）：<br />transition-timing-function:cubic-bezier(0.5, 0.2, 0.7, 0.3 );</li>
</ul>

　　CSS代码：

　　<style type="text/css">
　　.transition-timing-function{overflow:hidden;margin:0px;padding:0px;list-style:none;}

.transition-timing-function li{width:300px;height:60px; position:relative; margin-bottom:10px;padding:6px;border:1px solid #ab9595;background-color:#e3e2e0;}
.transition-timing-function li.ease{transition-property:top; top:0px; transition-duration:.3s;transition-timing-function:ease;}

.transition-timing-function li.linear{transition-property:bottom; bottom:0px; transition-duration:.5s;transition-timing-function:linear;}
.transition-timing-function li.ease-in{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:ease-in;}

.transition-timing-function li.ease-out{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:ease-out;}
.transition-timing-function li.ease-in-out{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:ease-in-out;}

.transition-timing-function li.step-start{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:1, step-start;}
.transition-timing-function li.step-end{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:1, step-end;}

.transition-timing-function li.steps{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:steps(2, start);}
.transition-timing-function li.steps-end{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:steps(5, end);}
.transition-timing-function li.cubic-bezier{transition-property:left;left:0px; transition-duration:.5s;transition-timing-function:cubic-bezier(0.5, 0.2, 0.7, 0.3 );}

.transition-timing-function li:nth-child(1):hover{top:80px;}

.transition-timing-function li:nth-child(2):hover{bottom:80px;}
.transition-timing-function li:nth-child(3):hover{left:180px;}

.transition-timing-function li:nth-child(4):hover{left:180px;}

.transition-timing-function li:nth-child(5):hover{left:180px;}
.transition-timing-function li:nth-child(6):hover{left:180px;}

.transition-timing-function li:nth-child(7):hover{left:180px;}
.transition-timing-function li:nth-child(8):hover{left:180px;}

 

.transition-timing-function li:nth-child(9):hover{left:180px;}
.transition-timing-function li:nth-child(10):hover{left:180px;}
　　</style>

 

　　效果图（鼠标移到上面）：

• 平滑过度（ease）：
  transition-timing-function:ease;
• 线性过度（linear）：
  transition-timing-function:linear;
• 由慢到快（ease-in）：
  transition-timing-function:ease-in;
• 由快到慢（ease-out）：
  transition-timing-function:ease-out;
• 由慢到快再到慢（ease-in-out）：
  transition-timing-function:ease-in-out;
• 步进函数（step-start）：
  transition-timing-function:step-start;
• 步进函数（step-end）：
  transition-timing-function:step-end;
• 步进函数（steps）：
  transition-timing-function:steps(2, start);
• 步进函数（steps）：
  transition-timing-function:steps(5, end);
• 自定义贝塞尔曲线类型（cubic-bezier）：
  transition-timing-function:cubic-bezier(0.5, 0.2, 0.7, 0.3 );