溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS3對過渡transition進(jìn)行調(diào)速以及延時(shí)的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1，使用調(diào)速函數(shù)控制過渡效果的速度曲線（加速，減速等）
使用調(diào)速函數(shù)可以設(shè)置過渡效果的速度曲線，從而實(shí)現(xiàn)過渡效果隨著時(shí)間來改變其速度。比如：開始很慢然后加速或者開始很快然后減速。
（1）CSS3定義了如下的調(diào)速函數(shù)：
linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。
（2）調(diào)速函數(shù)的使用
使用時(shí)只需要把調(diào)速函數(shù)跟在過渡屬性的時(shí)間參數(shù)后面。如果不填的話則使用默認(rèn)調(diào)速函數(shù)（ease）
transition: opacity 10s ease-in-out;
（3）使用樣例1：
下面通過樣例演示各種調(diào)速函數(shù)的效果區(qū)別。鼠標(biāo)移入方框，方框內(nèi)的方塊會(huì)向右移動(dòng)，同時(shí)方塊會(huì)旋轉(zhuǎn)，邊角變圓角，背景色和文字顏色也在改變。這些樣式的改變都會(huì)有過渡效果，同時(shí)由于使用不同的調(diào)速函數(shù)，過渡的快慢也是有區(qū)別的。
<!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：
下面通過對柱狀圖的寬度改變過渡，演示不同調(diào)速函數(shù)的效果區(qū)別。
<!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，為過渡增加延時(shí)
過渡屬性還可以添加一個(gè)可選的延時(shí)，用以將過渡的開始推遲一段時(shí)間。下面是一個(gè)等待1秒的例子。
延時(shí)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>延時(shí)1秒</div>
</div>
</html>以上是“CSS3對過渡transition進(jìn)行調(diào)速以及延時(shí)的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼