摘要：一條正在繪制中的三次方貝塞爾曲線因為該曲線由四個點形成，我們將其稱為三次方貝塞爾曲線，而不是二次方曲線三個點或四次方曲線五個點?，F(xiàn)在終于可以將貝塞爾曲線收入囊中了，也已經(jīng)對這

作者：Nicolas（滬江前端開發(fā)工程師）
本文原創(chuàng)翻譯，轉(zhuǎn)載請注明作者及出處。

各位，趕緊綁住自己并緊緊抓牢了，因為當(dāng)你掌握了特別有趣但又復(fù)雜的CSS時序函數(shù)之后，你將會真正體驗到豎起頭發(fā)般的興奮感受。

好吧，本文的主題可能還沒能讓你熱血沸騰。言歸正傳，時序函數(shù)對CSS動畫而言就像是一顆隱藏的寶石，你想得到多少驚喜取決于你如何使用它。

首先，讓我們定義下場景，并確保這些與時序函數(shù)相關(guān)的場景都是我們熟悉的。如上所述，當(dāng)你在CSS動畫領(lǐng)域中工作時（其中包括CSS過渡和基于關(guān)鍵幀的動畫），該功能將變得可用。那么，它究竟是什么，它是做什么的呢？

它是一個不太顯眼的基于動畫的CSS屬性之一，而它的大多數(shù)的相鄰屬性都是相當(dāng)自明的。然而，它的特別之處是它使你能夠控制和改變動畫的加速度 - 也就是說，它定義了動畫在指定的持續(xù)時間內(nèi)加速和減速的方式。

雖然它不影響動畫的實際持續(xù)時間，但它可能會影響到用戶如何感知動畫的快或者慢。如果你還不知道它的實際意義，那么請在這里聽我娓娓道來，因為時序函數(shù)屬性比定義的更加有趣。

注意：事實上沒有確切的“時序函數(shù)”的屬性命名，當(dāng)我提到這個“屬性”時，既是指transition-timing-function和animation-timing-function屬性。

在繼續(xù)之前，讓我們熟悉一下語法以及它適合在CSS中定義整個動畫過程的位置。為了淺顯易懂，讓我們使用CSS過渡做為例子。我們將從完整的過渡屬性數(shù)組開始：

div {
   transition-property: background;
   transition-duration: 1s;
   transition-delay: .5s;
   transition-timing-function: linear;
}

/* This could, of course, be shortened to: */
div {
   transition: background 1s .5s linear;
}

對定義過渡的簡寫是相當(dāng)寬松的，對于順序的唯一要求是延遲參數(shù)必須在持續(xù)時間值之后進行聲明（但不必立即跟在后面）。此外，對該功能來說transition-duration的值是唯一的必填項; 而且由于其他參數(shù)的默認值在大多數(shù)的時候都會適當(dāng)填充，因此過渡很少需要超過以下的代碼片段：

div {
   transition: 1s;
}

/* This is the same as saying: */
div {
   transition: all 1s 0s ease;
}

但這有點無趣。雖然默認值通常足以滿足頁面的標準懸停事件等，但如果你正在做一些更重要的東西，那么時序函數(shù)是微調(diào)動畫的一個重要技巧！

不管怎么樣，你現(xiàn)在已經(jīng)有了對時序函數(shù)是干什么的基本了解。接下來讓我們來看看它是如何做到的。

揭開面紗

過去很多人可能不會在意時序函數(shù)屬性的可用的關(guān)鍵詞，它們有五個：ease（默認）ease-in，ease-out，ease-in-out和linear。然而，這些關(guān)鍵字僅僅是用于定義貝塞爾曲線的簡寫。

納尼？

你可能不了解這個術(shù)語，但是我敢打賭，如果你使用過圖形編輯軟件，然后你還創(chuàng)建過一條曲線，你實際上看到的是一條貝塞爾曲線！沒錯，當(dāng)您使用筆或路徑工具來創(chuàng)建一個漂亮的平滑曲線，那么你正在繪制一條貝塞爾曲線！總之，貝塞爾曲線是時序函數(shù)背后的黑魔法 ; 它基本描述了在圖形上的加速模式。

這是關(guān)鍵字ease的貝塞爾曲線

如果你像我一樣第一次看到這樣的貝塞爾曲線，那么你可能想知道曲線是怎么從圖表上的四個點繪制而成的！我可能無法通過言語來告訴你，但幸運的是，我有一個特別精彩的GIF來幫助我解決這個問題，非常感謝維基百科。

一條正在繪制中的三次方貝塞爾曲線

因為該曲線由四個點形成，我們將其稱為“三次方”貝塞爾曲線，而不是“二次方”曲線（三個點）或“四次方”曲線（五個點）。

那么現(xiàn)在，這才是真正令人感到興奮的地方了，因為我揭示了你實際上可以通過cubic-bezier()函數(shù)簡單的替換時序函數(shù)屬性值的關(guān)鍵字來訪問這個曲線。我非常理解你可能需要一些時間來控制你的興奮情緒...

你可以使用cubic-bezier()函數(shù)操縱你想要的貝塞爾曲線，從而為你的動畫創(chuàng)建出完全自定義的加速模式！所以，讓我們看看這個函數(shù)是如何工作的，以及它是如何使你能夠創(chuàng)建出屬于自己的貝塞爾曲線的。

首先，我們知道曲線由四個點形成，稱為點0，點1，點2和點3。另外一個需要注意的重要事情是，第一個點和最后一個點（0和3）已經(jīng)在圖表上定義了，點0總是位于0,0（左下）和點3總是位于1,1（右上）。

這就使得你用cubic-bezier()函數(shù)只能在圖表上繪制點1和點2了。此函數(shù)傳入四個參數(shù)，前兩個是點1的x和y坐標，后兩個是點2的x和y坐標。

transition-timing-function: cubic-bezier(x, y, x, y);

為了舒適的理解語法，以及它是如何創(chuàng)建曲線和動畫的物理效果的，我將給你帶來5個和時序函數(shù)關(guān)鍵字相等的cubic-bezier()值以及動畫的最終效果。

讓我們先從ease-in-out關(guān)鍵字開始，因為這條曲線背后的邏輯以及它如何將其轉(zhuǎn)換為動畫的可能是最容易理解的。

/* The cubic-bezier() equivalent of the ease-in-out keyword */
transition-timing-function: cubic-bezier(.42, 0, .58, 1);

一個完全對稱的貝塞爾曲線，意味著動畫從慢速開始到全速，然后再減速。

你可以看到，點1位于沿著x軸的0.42處和在y軸上的0處，而點2位于x軸上的0.58和y軸上的1。這就是一條完全對稱的貝塞爾曲線，意味著動畫將低速移動至全速，然后以與起始處完全相同的速率移出。因此，這個關(guān)鍵字的名稱就是這樣來的。

如果你看一下下面的演示，你將會看到ease-in-out值的物理效果，以及它和其他關(guān)鍵字的值的不同之處。CodePen地址。

訪問CodePen上的演示效果

關(guān)鍵字ease是CSS時序函數(shù)屬性的默認值，它實際上和前一個非常接近，雖然它以更快的速度移入，而以更平穩(wěn)的速度移出。

/* The ease keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.25, .1, .25, 1);

關(guān)鍵字ease的曲線以更快的速度移入，以更平穩(wěn)的速度移出。

你可以看到在動畫中的這個時序函數(shù)直接轉(zhuǎn)換成的物理效果，在原點處更加陡峭，到結(jié)束點又被拉長了。在查看了這些示例后，記得參考之前的演示來對比下效果。

勿庸置疑，關(guān)鍵字ease-in和ease-out是正好相反的。前者是低速開始，而后者是低速結(jié)束，其他時間內(nèi)都保持全速。我們之前看到的ease-in-out關(guān)鍵字如同邏輯所暗示的那樣，就是這2條貝塞爾曲線的完美組合。

/* The ease-in keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.42, 0, 1, 1);

/* The ease-out keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, .58, 1);

ease-in貝塞爾曲線（左）| ease-out貝塞爾曲線（右）

最后一個關(guān)鍵字就完全不是曲線了。正如其名稱所示，linear時序函數(shù)值在整個動畫過程中都保持相同的速度，這意味著所得到的貝塞爾曲線（或者根本不是）將只是一條直線。在曲線圖上表現(xiàn)為沒有變化的加速模式。

/* The linear keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, 1, 1);

linear時序函數(shù)值在整個動畫期間保持相同速度。

假如你回到之前的演示，你可能會注意到，盡管所有的例子都有保持不變的持續(xù)時間值，但有一部分的動畫看起來會慢于其他動畫。這是為什么呢？就拿ease-in-out作為一個例子，我們知道，它在開始和結(jié)束時都比較慢，這意味著它所涉及動畫的中間部分需要以更快的速度執(zhí)行。這就有效確保了我們感知的實際動畫會更快更短，而線性動畫看上去更長。

你也許會覺得，這篇文章寫的有點拖沓（看我都寫了些什么呀？），所以，現(xiàn)在是時候來寫點干貨了，看看如何使用cubic-bezier()函數(shù)來創(chuàng)建自定義的時序函數(shù)。

現(xiàn)在我們已經(jīng)看到了關(guān)鍵字是如何等同于相對應(yīng)的貝塞爾曲線的，并且看到了它們在動畫上的效果，那么再來看看如何操作曲線來創(chuàng)建自定義加速模式。

現(xiàn)在你應(yīng)該能夠利用cubic-bezier()函數(shù)在曲線圖上繪制點1和點2 ，并相當(dāng)清楚這將會如何影響動畫。然而，考慮到你通?？床坏降那€圖上繪制點，顯然這可能會非常無趣。

幸好還存在Lea Verou這樣的牛人，他們似乎從不需要休息，直到讓CSS的開發(fā)可以變得更加簡單！Lea開發(fā)的Cubic Bézier工具，可以用來創(chuàng)建完整的自定義的貝塞爾曲線，并將執(zhí)行的動作與預(yù)定義的關(guān)鍵字進行比較。這意味著，你可以使用這個平臺工具建立貝塞爾曲線直到得到你想要的效果，而不是在cubic-bezier()函數(shù)中無聊地編輯數(shù)字。你可以訪問Cubic Bezier然后把玩一下曲線，直到可以實現(xiàn)你想要的效果。這就方便多了不是嗎。

LEA Verou開發(fā)的極其有用的Cubic Bézier（查看大圖）

簡寫的關(guān)鍵字為你提供了在開始使用時序函數(shù)時有了很好的選擇，但是它們之間的差異通常較小。只有當(dāng)你開始創(chuàng)建自定義貝塞爾曲線時，你才會意識到時序函數(shù)在動畫上會給你帶來驚人的效果。

請看下面的示例，看一下各個動畫在相同持續(xù)時間內(nèi)的極端差異。CodePen地址。

讓我們仔細看一下第一個例子，試著去搞明白為什么它會產(chǎn)生這樣一個完全不同的效果。

/* cubic-bezier() values for first example from preceding demo page */
transition-timing-function: cubic-bezier(.1, .9, .9, .1);

自定義貝塞爾曲線的示例

這個時序函數(shù)和默認關(guān)鍵字之間的主要區(qū)別是這個陡峭的貝塞爾曲線靠近了“進度”標尺（y軸）。這意味著動畫會突然前進，在中間（即曲線接近水平時）有一段較長的幾乎暫停的低速。這種模式與我們習(xí)慣于使用時序函數(shù)關(guān)鍵字的方式形成了鮮明對比，它采用相反的方向，緩動時段出現(xiàn)在動畫的開始和結(jié)束，并不是在中間。

現(xiàn)在終于可以將貝塞爾曲線收入囊中了，也已經(jīng)對這個cubic-bezier()函數(shù)的功能屬性做了徹底的探討，對嗎？也許你是這么想的，但這個狡猾的家伙還有更多的套路可以玩！

沒錯：貝塞爾曲線還可以更有趣！誰會想到，只有時間標尺（x軸）被限制在曲線圖上的0-1的范圍內(nèi)，而進度標尺（y軸）可以繼續(xù)延伸甚至超出0-1的范圍。

進度標尺恰如你所想象的那樣，底端（0）標記動畫的開始，頂端（1）標記動畫的結(jié)束。通常，三次的貝塞爾曲線總是以不同強度在這個進度標尺里向北方向運行，直到到達動畫的終點。然而，在0—1范圍之外繪制點1和點2的可能性將使得曲線蜿蜒回退到進度標尺內(nèi)，這實際上會導(dǎo)致在動畫中出現(xiàn)反向運動！和之前一樣，理解這一點的最好方法是通過視圖：

用標準0-1范圍之外的值的自定義貝塞爾曲線

你可以看到點2在-0.5的位置，被繪制在標準0-1范圍之外，，曲線反向下拉。如果你看下面的演示，你會看到，這會在動畫的中段產(chǎn)生一個彈跳效果。CodePen地址。

反之，你可以把反向運動放置于動畫的起始處，并故意超出原來終點。它就像是后退了幾步又回到了起點; 然后，在終點處，你的運動慣性使你超過了目的地，導(dǎo)致你走了幾步后，又保證你回到預(yù)期的目的地。請看下面的示例，以徹底理解我們在這里說的什么。另外，產(chǎn)生這種效果的貝塞爾曲線也可以在下面看到。CodePen地址。

使用標準0-1范圍之外的值的自定義貝塞爾曲線

你現(xiàn)在應(yīng)該對cubic-bezier()函數(shù)的值在標準的0-1范圍以外如何影響到動畫播放有一個較好的理解。當(dāng)然我們可以整天看移動箱子的例子，但還是讓我們用一個有創(chuàng)意的時序函數(shù)逼真的演示一個示例來完成這一部分的內(nèi)容。CodePen地址。

沒錯：這是一個漂浮氣球的動畫！你不總是想用CSS來做到這樣的動畫嗎？

這個動畫的要點是，當(dāng)你點擊“添加氦氣”氣球飄到了“天花板”， 就像自然世界中的那樣，在碰到頂部之前會輕微回彈。使用cubic-bezier()函數(shù)的值在0-1范圍之外可以讓我們創(chuàng)造出彈跳，最終有助于產(chǎn)生一個逼真的效果。下面的代碼片段展示了在cubic-bezier()函數(shù)中使用的坐標，而最終的貝塞爾曲線的表現(xiàn)在下方可以看到。

/* The cubic-bezier() values for the bouncing balloon */
transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);

模擬彈跳的氣球的自定義貝塞爾曲線

這個例子非常好地解釋了曲線是如何轉(zhuǎn)換為最終的動畫的，因為它表現(xiàn)的幾乎完美。首先，可以看到的是，曲線從進度標尺開始一直到結(jié)束都是一條直線，表示氣球以恒定的速度從動畫開始移動到結(jié)束。然后，和氣球非常相似的是，曲線從標尺的頂端向下反彈，然后再緩緩地回到頂部。相當(dāng)簡單！

一旦你掌握了曲線并用它來操縱你想要的藝術(shù)品，你就成功了。

要注意的最后一點是，當(dāng)應(yīng)用于CSS關(guān)鍵幀動畫時時序函數(shù)是如何表現(xiàn)的。這些概念與我們迄今為止使用的過渡示例中的概念完全相同。但需要注意有一個重要的例外：當(dāng)你應(yīng)用一個時序函數(shù)設(shè)置關(guān)鍵幀時，它會在每一個關(guān)鍵幀都會被執(zhí)行，而不是應(yīng)用于動畫的整個部分。

為了證明這一點，假如我們有四個關(guān)鍵幀，把一個箱子在一個矩形的四個角內(nèi)移動，然后你應(yīng)用了“彈跳”時序函數(shù)，也就是我們在前面的氣球示例中使用的“反彈”的時序函數(shù)，那么四個關(guān)鍵幀中每一個動作都會經(jīng)歷反彈，而不是整個動畫。讓我們看看這個效果和代碼。CodePen地址。

@keyframes square {
   25% {
      top:200px;
      left:0;
   }

   50% {
      top:200px;
      left:400px;
   }

   75% {
      top:0;
      left:400px;
   }     
}

div {
   animation: square 8s infinite cubic-bezier(.65, 1.95, .03, .32);
   top: 0;
   left: 0;
   /* Other styles */
}

注意，如果100%的關(guān)鍵幀沒有定義，那么元素將簡單的返回到它起點的樣式，這在這個案例中是本來想要的結(jié)果，所以就沒必要定義了。從演示中可以很明顯的看到，時序函數(shù)應(yīng)用于四個關(guān)鍵幀中的每一個，因為它們每個都表現(xiàn)為從容器壁反彈。

如果你需要某些關(guān)鍵幀來呈現(xiàn)有別于其他的時序函數(shù)，可以直接使用一個多帶帶的時序函數(shù)值給到關(guān)鍵幀，比如下面的代碼片段。

@keyframes square { 
   50% {
      top: 200px;
      left: 400px;
      animation-timing-function: ease-in-out;
   }
}

如果你認為這就是時序函數(shù)的全部了，那么我告訴你，CSS時序函數(shù)要比預(yù)定義的緩動函數(shù)還要更多！

在這一節(jié)中，當(dāng)我們通過steps()時序函數(shù)探索“分步函數(shù)”的概念時，我們可以把我們的曲線轉(zhuǎn)換成直線。

steps()函數(shù)是一個很小眾的工具，但在工具箱中仍然是有用的。它使您能夠?qū)赢嫹殖啥鄠€步驟，而不是我們習(xí)慣的常規(guī)補間動畫。例如，如果我們想要將一個正方形在4秒內(nèi)分四步向右移動400個像素，那么正方形將每秒向右跳100個像素，而不是連續(xù)運動。讓我們來看看在這個特殊案例中所需要的語法，既然我們已經(jīng)理解了錯綜復(fù)雜的cubic-bezier()函數(shù)，這個就應(yīng)該非常簡單了。CodePen地址。

div {
   transition: 4s steps(4);
}

div:target {
   left: 400px;
}

如你所見，將動畫分割成多個步驟是如此的簡單。但要記住，這個數(shù)字必須是一個正整數(shù)，所以不能是負數(shù)或者小數(shù)。然而，第二個可選參數(shù)為我們提供了更多的控制，可能的值有start和end，后者是默認的值。

transition-timing-function: steps(4, start);
transition-timing-function: steps(4, end);

Start會在每個步驟的起始位置運行動畫，而end是在每個步驟的結(jié)束處運行動畫。使用之前的“移動箱子”示例，下圖對兩者之間的差異做了很好的解釋。

start和end值在steps()函數(shù)中的差異。

可以看到，start值，只要動畫被觸發(fā)，它就會立即開始，而end值，它開始于第一個步驟的結(jié)尾處（在這個案例中，將會在一秒鐘之后被觸發(fā)）。

為了確保這個概述的足夠全面，steps()函數(shù)還可以用兩個預(yù)定義的關(guān)鍵字：step-start和step-end代替。前者相當(dāng)于steps(1, start)，而后者是相當(dāng)于steps(1, end)。

好吧，你可能沒有太多的需求來動畫一個移動的箱子，但steps()函數(shù)也有很多很酷的用途。例如，如果你有一套基礎(chǔ)的卡通的所有圖片精靈（sprites），那么你可以使用這種技術(shù)來逐幀播放，只需要使用幾個CSS屬性！讓我們來看一個演示和制作它功能的代碼。CodePen地址。

div {
   width: 125px;
   height: 150px;
   background: url(images/sprite.jpg) left;
   transition: 2s steps(16);
   /* The number of steps = the number of frames in the cartoon */
}

div:target {
   background-position: -2000px 0;
}

首先，我們有一個小的矩形框（125像素寬），它有一個背景圖像（2000像素寬），并排包含16幀。這個背景圖像最初與框的左邊緣對齊; 所以，我們現(xiàn)在需要做的是將背景圖像一直向左移動，以便所有的16幀都通過小矩形窗口。正常動畫下，當(dāng)背景圖像向左移動時，幀將僅僅在視圖中滑動; 然而，用steps()函數(shù)，背景圖像可以移動16步到左側(cè)，確保每一個16幀的圖像可以像你希望的那樣進出視圖。就像這樣，你僅僅使用CSS過渡就可以播放一個基本的卡通！

這個GIF演示了背景圖分步通過“窗口”的概念

我還發(fā)現(xiàn)另一個使用steps()函數(shù)的創(chuàng)意來源于LEA Verou，她想出了一個特別巧妙的打字動畫。CodePen地址。

首先，你需要一些文本，但不幸的是，你還需要確切的知道你正在使用的字符數(shù)，因為你需要在CSS中使用這個數(shù)字。另一個要求是字體必須是等寬的，以便所有字符的寬度完全相同。

smashingmag

.text {
   width: 6.6em;
   width: 11ch; /* Number of characters */
   border-right: .1em solid;
   font: 5em monospace;
}

我們正在處理的文本有11個字符。在CSS單位ch的幫助下，我們實際上可以使用這個數(shù)字來定義該段的寬度，盡管我們應(yīng)該指定回退寬度針對那些并不支持這個單位的瀏覽器。然后，該段落在右側(cè)顯示一個黑色實心框，這將成為光標。現(xiàn)在一切就緒; 我們只需要簡單的使它動起來。

這需要兩個多帶帶的動畫：一個用于光標，一個用于打字。要實現(xiàn)前者，我們所需要做的就是使黑色邊框閃爍，這沒有更簡單的了。

@keyframes cursor {
   50% {
     border-color: transparent;
   }
}

.text {
   /* existing styles */
   animation: cursor 1s step-end infinite;
}

按照原先的設(shè)定，黑色邊框只會在黑色和透明之間切換，然后連續(xù)循環(huán)。這是steps()至關(guān)重要的地方，因為如果沒有它，光標也只是淡入淡出，而不會閃爍。

最后，打字動畫也很簡單。我們需要做的是在11個步驟（字符數(shù)）中將其寬度重新設(shè)置為全部寬度之前，將段落的寬度變?yōu)榱恪?/p>

@keyframes typing {
   from {
      width: 0;
   }
}

.text {
   /* existing styles */
   animation: typing 8s steps(11), 
              cursor 1s step-end infinite;
}

在這里有一個關(guān)鍵幀，文本會在8秒內(nèi)每次顯示一個字母，而黑色右邊框（光標）會連續(xù)閃爍。該技術(shù)非常簡單，但卻很有效。

只要加上這個由LEA Verou創(chuàng)造的steps()函數(shù)的極佳用法，就將完全改變效果，或許使文字看上去被刪除也不在話下。要做到這一點，只需改變下關(guān)鍵幀的關(guān)鍵字，以便它從to讀取而不是from，然后添加一個forwards的animation-fill-mode參數(shù)到一組動畫規(guī)則中。這將確保一旦文本“刪除”（即當(dāng)動畫完成時），文本仍然保留被刪除狀態(tài)。看一下下面的演示。CodePen地址。

但本節(jié)中的兩個示例的缺點是，必須事先知道幀或字符的數(shù)量，以指定正確的步數(shù)，如果此數(shù)字變更了，那么您將需要同時更改代碼。盡管如此，steps()函數(shù)在此已經(jīng)展現(xiàn)了它的價值，而且是CSS時序函數(shù)的另一個神奇功能。

我們已經(jīng)制定的，除非瀏覽器支持基于CSS的動畫，即CSS過渡和CSS動畫（基于關(guān)鍵幀的）模塊，否則不能使用CSS時序函數(shù)。幸運的是，現(xiàn)在瀏覽器的支持性越來越好了。

再次強調(diào)，對于關(guān)鍵幀動畫，只需要包含-webkit-前綴和沒有前綴的代碼。

顯然，基于CSS動畫的瀏覽器支持性是非常好的，但當(dāng)涉及到時序函數(shù)時，支持性會變得略有不同。請看下表更詳細地說明。

再次再次強調(diào)，雖然某些瀏覽器還需要更長一段時間才能支持時序函數(shù)的完整功能，但可以看到目前的瀏覽器版本對此功能的支持較為普遍。（譯者注：目前主流瀏覽器都已經(jīng)很好的支持）

讓我們回顧一下，我們學(xué)到了CSS時序函數(shù)的什么？。

它們定義了動畫加速和減速的位置。

他們不僅僅是預(yù)定義的關(guān)鍵字。

您可以通過用cubic-bezier()函數(shù)在0-1范圍以外的值來創(chuàng)建反彈效果。

您可以將動畫分成任意數(shù)量的步驟，而不是補間動畫。

瀏覽器的支持非常好，而且在不斷改進中。

最后，這不是一篇關(guān)于CSS3技術(shù)的文章，雖然這些技術(shù)現(xiàn)在已經(jīng)得到全面的支持，但還是需要做漸進增強。我們總是要從下到上的處理; 也就是說，漸進增強可以在不能很好支持這些功能的設(shè)備和瀏覽器上為瀏覽器優(yōu)化處理，確保你的作品的可接受性和可訪問性。

除此之外，祝你在用曲線和分步的時序函數(shù)調(diào)試動畫時玩的愉快！哈～

“Cubic Bézier”，Lea Verou

一個制作和對比貝塞爾曲線的平臺

“Timing Functions”，Mozilla 開發(fā)者網(wǎng)絡(luò)

貝塞爾曲線的更多概述

“Bézier Curves”，維基百科

了解貝塞爾曲線的更多信息

iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
>> 滬江Web前端上海團隊招聘【W(wǎng)eb前端架構(gòu)師】，有意者簡歷至：[email protected] <<