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://jinyejixie.com/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)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

CSS3對(duì)過(guò)渡transition進(jìn)行調(diào)速以及延時(shí)的示例