1，应用调速涵数操纵衔接实际效果的速率曲线图（加快，降速等）
应用调速涵数能够设定衔接实际效果的速率曲线图，进而完成衔接实际效果伴随着時间来更改其速率。例如：刚开始比较慢随后加快或是刚开始迅速随后降速。
（1）CSS3界定了以下的调速涵数：
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 中间的标值。
（2）调速涵数的应用
应用时只必须把调速涵数跟在衔接特性的時间主要参数后边。假如不填得话则应用默认设置调速涵数（ease）
transition: opacity 10s ease-in-out;
（3）应用样例1：
下边根据样例演试各种各样调速涵数的实际效果差别。电脑鼠标移入方框，方框中的方块会向右移动，同时方块会转动，边角变圆弧，情况色和文本色调也在更改。这种款式的更改都是经历渡实际效果，同时因为应用不一样的调速涵数，衔接的速度也是有差别的。
<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
.trans_box {
padding: 20px;
*zoom:1;
}
.trans_list {
width: 10%;
height: 64px;
margin:10px 0;
color:#fff;
text-align:center;
}
.linear {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}
.ease {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
.ease_in {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
}
.ease_out {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
.ease_in_out {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}
.trans_box:hover .trans_list, .trans_box_hover .trans_list {
margin-left:89%;
color:#333;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>
<div id="transBox" class="trans_box">
<div class="trans_list ease">ease<br>(default)</div>
<div class="trans_list ease_in">ease-in</div>
<div class="trans_list ease_out">ease-out</div>
<div class="trans_list ease_in_out">ease-in-out</div>
<div class="trans_list linear">linear</div>
</div>
</html>
（4）应用样例2：
下边根据对柱状图的总宽更改衔接，演试不一样调速涵数的实际效果差别。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:10px 0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
.trans_box:hover div
{
width:500px;
}
</style>
</head>
<body>
<div id="transBox" class="trans_box">
<div id="div2" style="top:150px">ease<br>(default)</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>
<div id="div1" style="top:100px">linear</div>
</div>
</body>
</html>
2，为衔接提升廷时
衔接特性还能够加上一个可选择的廷时，用于将衔接的刚开始延迟一一段时间。下边是一个等候一秒的事例。
廷时一秒
<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
.trans_box3 {
padding: 20px;
*zoom:1;
}
.trans_box3 div{
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
-webkit-transition: all 2s ease-out 1s;
-moz-transition: all 2s ease-out 1s;
-o-transition: all 2s ease-out 1s;
transition: all 2s ease-out 1s;
}
.trans_box3:hover div
{
width:500px;
}
</style>
</head>
<div class="trans_box3">
<div>廷时一秒</div>
</div>
</html>
到此这篇有关CSS3 对衔接(transition)开展调速及其廷时的文章内容就详细介绍到这了,大量有关CSS3 衔接调速及廷时內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！