一開始在使用CSS3的時候并沒有太注意這個timing-function，只是注意到自定義貝塞爾曲線。

　　1)一個項目中的實例

　　先來看看左邊加了steps和右邊沒加的區(qū)別。左邊的是一錘一錘的，右邊會出現(xiàn)影子。

　　【注意下面這個demo在firefox中不能執(zhí)行，只能在chrome中執(zhí)行，因為我動畫的是“background-image”屬性】

　　代碼如下，我只把關(guān)鍵的幾個代碼貼出來了，詳細(xì)的可以查看這里：

.btn-pay {
 background: url(t_btn-pay.png) no-repeat -30px;
 animation: pay-interval 0.5s steps(1) infinite;
}
.btn-pay2 {
 animation: pay-interval 0.5s linear infinite;
}
@keyframes pay-interval {
 from {
 background-image: url(t_btn-pay.png);
 }
 30% {
 background-image: url(t_btn-pay-active.png);
 }
 to {
 background-image: url(t_btn-pay.png);
 }
}

　　2)參數(shù)說明

　　語法如下：　　

　　a. 第一個參數(shù)指定了時間函數(shù)中的間隔數(shù)量(必須是正整數(shù))，這個間隔數(shù)量作用用于兩個關(guān)鍵幀之間，也就是form與30%之間、30%與to之間。

　　b. 第二個參數(shù)可選，接受 start 和 end 兩個值，指定在每個間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，默認(rèn)為 end。

　　我在CSS中設(shè)置了1(這個例子中start與end區(qū)別不大)，也就是一步一步動畫，而如果不設(shè)置，那其實里面就會有多步操作，就會出現(xiàn)影子。

　　國外有篇文章中寫了個例子，可以區(qū)分這兩個值的區(qū)別，demo鏈接可以點(diǎn)擊這里，具體的原理可以在網(wǎng)上搜索。

.contain-car {
 animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
 animation: drive 4s steps(4, start) infinite;
}

　　3)通過sprite圖片制作動畫

　　通過合成的圖片，再設(shè)置個間隔數(shù)，就能出現(xiàn)動畫了，例如下面的這張loading圖片，點(diǎn)擊查看在線demo。

　　二、animation-direction

　　animation-direction 定義是否應(yīng)該輪流反向播放動畫，選項有normal、alternate(交替)、reverse(反向)等。

　　1)一個項目中的實例

　　左邊的抖動明顯要流暢很多，而右邊的抖動在完成100%以后就直接跳回到0%的狀態(tài)。

　　代碼如下，我只把關(guān)鍵的幾個代碼貼出來了，詳細(xì)的可以查看這里：

.img1 {
 animation: tel-rotate 1s linear infinite alternate;
}
.img2 {
 animation: tel-rotate 1s linear infinite;
}
@keyframes tel-rotate {
 from {
 -webkit-transform: rotate(-20deg);
 transform: rotate(-20deg);
 }
 to {
 -webkit-transform: rotate(40deg);
 transform: rotate(40deg);
 }
}

　　2)CSS3動畫幀數(shù)計算器

　　在做這個抖動的時候，一開始沒有注意到這個屬性，后面查到有這么一個CSS3動畫幀數(shù)計算器。

　　并注意到這個里面來回滾動的動畫非常流暢。關(guān)鍵幀的計算是蠻有講究的，里面還有些算法了，網(wǎng)上相關(guān)資料也蠻多的。

　　三、timing-function: cubic-bezier()

　　自定義貝塞爾曲線函數(shù)，通過設(shè)置四個參數(shù)，可以控制動畫的速度。

　　平時使用的ease、linear、ease-in等，其實也是輸入了四個參數(shù)后得到的結(jié)果。

　　1)一個網(wǎng)上的實例

　　通過自定義可以組織比較復(fù)雜的合成動畫，例如球跌落到地上的情景，點(diǎn)擊查看在線代碼。

　　當(dāng)我看到這個實例的時候，我是蠻震驚的，我一直以為這種動畫需要與JavaScript配合才行。

　　圖片來自于《網(wǎng)頁動畫的十二原則》，這篇文章從國外翻譯過來的，里面的原則是迪士尼動畫總結(jié)的。

　　2)貝塞爾輔助工具

　　在easings.net這個網(wǎng)頁上，可以查看各種緩動的效果。

　　在cubic-bezier.com中，可以在線制作，拖動紅色或藍(lán)色的那兩個點(diǎn)，可以自動顯示相應(yīng)的參數(shù)。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com