CSS3對(duì)過(guò)渡transition進(jìn)行調(diào)速以及延時(shí)的示例
這篇文章主要介紹CSS3對(duì)過(guò)渡transition進(jìn)行調(diào)速以及延時(shí)的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的靖州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
1，使用調(diào)速函數(shù)控制過(guò)渡效果的速度曲線（加速，減速等）
使用調(diào)速函數(shù)可以設(shè)置過(guò)渡效果的速度曲線，從而實(shí)現(xiàn)過(guò)渡效果隨著時(shí)間來(lái)改變其速度。比如：開始很慢然后加速或者開始很快然后減速。
（1）CSS3定義了如下的調(diào)速函數(shù)：
linear 規(guī)定以相同速度開始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過(guò)渡效果（等于 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ù)跟在過(guò)渡屬性的時(shí)間參數(shù)后面。如果不填的話則使用默認(rèn)調(diào)速函數(shù)（ease）
transition: opacity 10s ease-in-out;
（3）使用樣例1：
下面通過(guò)樣例演示各種調(diào)速函數(shù)的效果區(qū)別。鼠標(biāo)移入方框，方框內(nèi)的方塊會(huì)向右移動(dòng)，同時(shí)方塊會(huì)旋轉(zhuǎn)，邊角變圓角，背景色和文字顏色也在改變。這些樣式的改變都會(huì)有過(guò)渡效果，同時(shí)由于使用不同的調(diào)速函數(shù)，過(guò)渡的快慢也是有區(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：
下面通過(guò)對(duì)柱狀圖的寬度改變過(guò)渡，演示不同調(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，為過(guò)渡增加延時(shí)
過(guò)渡屬性還可以添加一個(gè)可選的延時(shí)，用以將過(guò)渡的開始推遲一段時(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對(duì)過(guò)渡transition進(jìn)行調(diào)速以及延時(shí)的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：CSS3對(duì)過(guò)渡transition進(jìn)行調(diào)速以及延時(shí)的示例
網(wǎng)站地址：http://muchs.cn/article40/ppjseo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、企業(yè)建站、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、自適應(yīng)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都網(wǎng)站優(yōu)化當(dāng)中關(guān)鍵詞優(yōu)化的注意事項(xiàng) 2016-10-26
- seo關(guān)鍵詞優(yōu)化：網(wǎng)站快照查詢歷史因子方式 2020-11-27
- 關(guān)鍵詞優(yōu)化上不去的原因 2016-09-19
- 新制作的網(wǎng)站怎么做關(guān)鍵詞優(yōu)化推廣才有效呢 2016-10-30
- SEM關(guān)鍵詞優(yōu)化的核心是什么？ 2015-01-14
- 關(guān)于網(wǎng)站SEO關(guān)鍵詞優(yōu)化的幾個(gè)重點(diǎn) 2014-10-19
- 關(guān)鍵詞優(yōu)化時(shí)不出現(xiàn)排名怎么辦？ 2022-11-14
- 搜索引擎優(yōu)化之目標(biāo)關(guān)鍵詞優(yōu)化 2023-02-20
- 手機(jī)網(wǎng)站設(shè)計(jì)原則如何做好關(guān)鍵詞優(yōu)化 2021-05-11
- 網(wǎng)站關(guān)鍵詞優(yōu)化該怎么篩選 2023-04-03
- 網(wǎng)站關(guān)鍵詞優(yōu)化推廣做起來(lái)慢原因何在呢？ 2016-10-30
- 網(wǎng)站優(yōu)化如何做整站關(guān)鍵詞優(yōu)化 2022-12-24