這篇文章主要介紹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)改變其速度。比如：開(kāi)始很慢然后加速或者開(kāi)始很快然后減速。

（1）CSS3定義了如下的調(diào)速函數(shù)：

linear               規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
ease                規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in            規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out          規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out      規(guī)定以慢速開(kāi)始和結(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ū)別的。

    
    
    


    ease
(default)