溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS3對過渡transition進行調速以及延時的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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，為過渡增加延時
過渡屬性還可以添加一個可選的延時，用以將過渡的開始推遲一段時間。下面是一個等待1秒的例子。
延時1秒
<!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>延時1秒</div>
</div>
</html>以上是“CSS3對過渡transition進行調速以及延時的示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
