了解CSS的定時功能

世界人民，系好安全帶，緊緊抓住，因為你是要經歷真正的驚心動魄的興奮，因為你能掌握的巨大有趣的CSS計時功能的復雜性！

好了，這篇文章的主題可能還沒有發送你的血的賽車，但所有的笑話不談，定時功能是有點隱藏的寶石 ， 當涉及到CSS動畫，你可以很好地到底有多少驚訝你可以用它做。

首先，讓我們來設置場景，并確保我們都熟悉的定時功能相關的場景。 至于提到的功能，當你工作在CSS動畫，其中包括CSS過渡以及基于關鍵幀動畫的境界變為可用。 那么，它究竟是什么和它有什么作用？

CSS的定時功能的解釋

這是不太明顯的動畫為基礎的CSS屬性之一，而它的大部分同行是相當不言自明。 然而，它的要點是，它使您能夠控制和改變動畫的加速 – 也就是說，它定義了動畫的速度并在指定的時間變慢。

雖然它不會影響動畫的實際持續時間，它可能對如何快或慢的用戶感知動畫是有深遠的影響。 如果你不賣的它的實際目的，學懂，然后用我堅持在這里，因為定時功能特性得到了很多更有趣的比定義提出。

注意 ：有一個名為“計時功能?！碑斘野堰@個“財產”，其實我指的是既沒有實際財產transition-timing-function和animation-timing-function特性。

在繼續之前，讓我們熟悉一下語法，以及它安裝到定義的CSS動畫的全過程。 為了簡單起見，我們使用這個例子一個CSS過渡。 首先，我們將過渡性質的全排列：

 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; }

簡寫為定義一個過渡是相當寬松的，該命令是，延遲參數必須的持續時間值后加以說明（但不一定后立即）的唯一要求。 此外， transition-duration值實際上是所需的代碼功能是唯一的; 而且由于其他參數的默認值是足夠的大部分時間，你的轉換很少需??要比下面的代碼片段什么了：

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

但是這是一個有點無聊。 而默認值通常足以滿足標準懸停事件，而有關，如果你正在做的東西多一點實質性的，那么計時功能是一個嚴重的伎倆微調動畫！

不管怎么說，你現在有定時功能做什么的想法。 讓我們來看看它是怎么做的。

尋找引擎蓋下

你們中許多人可能不看過去的可用關鍵字的定時功能特性，其中有五： ease （默認）， ease-in ， ease-out ， ease-in-out和linear 。 然而，這些關鍵字只是速記定義的貝塞爾曲線。

該怎么辦？！

你可能不熟悉這個術語，但我敢打賭，你實際上已經看到了貝塞爾曲線 – 赫克，如果你已經使用圖形編輯軟件，那么你可能甚至創建了一個！ 這是正確的，當你使用鋼筆或路徑工具創建一個漂亮的光滑曲線，那么你繪制貝塞爾曲線！ 總之，要拿到本節的點， 貝塞爾曲線的背后是計時功能的神奇 ; 它基本上描述了一個圖形加速模式。

如果你喜歡我什么，我第一次看到這樣的貝塞爾曲線，那么你可能會在地球上不知道如何該曲線可以從四個點繪制在圖上形成！ 我不可能告訴你的話，但是，幸運的是，我有一個特別神奇的GIF做的工作對我來說， 禮貌維基百科 。

因為這條曲線是由四個點組成，我們把它作為一個“立方”貝塞爾曲線，而不是一個“二次”曲線（三個點）或“四次”曲線（5分）。

引入立方貝塞爾（）函數

那么現在，這就是事情變得很興奮，因為我揭示，你實際上可以得到訪問該曲線通過cubic-bezier()函數，它可以簡單地代替計時功能屬性值的關鍵字的使用。 我明白，你可能需要一些時間來控制你的興奮……

與cubic-bezier()函數，你可以操縱貝塞爾曲線無論你的愿望 ，你的動畫創建完全自定義的加速模式！ 那么，讓我們來看看這個函數是如何工作的，以及它如何使您能夠創建你自己的貝塞爾曲線。

首先，我們知道，該曲線是由四個點，這被稱為點0，點1，點2和點3形成。要注意的另一重要的事情是，在第一和最后一個點（0和3）已經圖上的定義，與0點總是坐在0,0 （左下）和第3點一直坐在1,1 （右上）。

只留下點1和點2供您繪制在圖上，你可以使用做cubic-bezier()函數！ 該函數有四個參數，第2點是1的x和y坐標以及后兩者是點2的x和y坐標。

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

獲得舒適與語 ??法，以及它是如何創建的曲線，并與動畫的物理效果，我帶你去通過五個計時功能的關鍵字，它們相當于cubic-bezier()值和由此產生的影響上的動畫。

易于在出

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

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

你可以看到，點1被定位在0.42沿x軸方向和在0上的y軸，而點2位于0.58上的y軸與x軸和1。 其結果是一個完全對稱的貝塞爾曲線，這意味著動畫將緩解至全速，然后緩解了在完全相同的速度; 因此，該關鍵字的名稱。

如果你看看下面的演示中，你將看到的物理效果ease-in-out價值，以及如何比較其他的關鍵字值。

緩解

在ease的關鍵字是CSS計時功能屬性的默認值，它實際上是非常相似的前一個，雖然它簡化了在緩和出更逐步之前更快的速度。

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

你可以看到一個清晰的傾斜的曲線開始，而結束時更抽出，直接轉換到這個計時功能對動畫中的物理效果。 不要忘了審查的每一個例子來比較的影響后，參考前面的演示。

易用性并緩解出

在ease-in和ease-out關鍵字是勿庸置疑，絕對對立。 前者例在維持全速一直到終點之前，而后者命中全速馬上回落至終點前的蝙蝠。 在ease-in-out關鍵字，我們看了以前就是因為邏輯建議，這兩個貝塞爾曲線的完美結合。

 /* 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);

線性

最后的關鍵詞來地址不對應的曲線在所有。 正如其名稱所暗示的， linear的定時函數值保持相同的速度在整個動畫，這意味著所得的貝塞爾曲線（或缺乏）。將只是一條直線。 根本就沒有變加速圖案描繪在圖形上。

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

如果你回頭來演示，你可能會注意到，盡管所有的具有完全相同的持續時間值的例子，一些動畫似乎比別人慢。 這是為什么？ 那么，采取ease-in-out關鍵字作為一個例子，我們知道，它開始和結束以較慢的速度，這意味著它已經覆蓋到動畫的中間地帶以更快的步伐。 這有效地確保了我們感知的實際的動畫是既短且快，同時，例如，線性的動畫顯示更長和更引出。

你可能會覺得，這篇文章是非常緩慢緩和到其充分的步伐（見我做什么呢？），所以現在它終于有時間來加強了一點東西，看看如何使用cubic-bezier()函數來創建我們自定義定時功能。

創建自定義加速模式與立方貝塞爾（）函數

現在，我們已經看到了關鍵字如何等同于相應的貝塞爾曲線，并看到他們對動畫效果，讓我們來看看如何操作曲線來創建自定義加速模式。

您現在應該能夠繪制點1和2上使用的圖形cubic-bezier()函數，并且具有這將如何影響動畫的一個非常堅實的想法。 然而，考慮到你在繪制的圖形，你通常看不出來，很明顯，這可能會非常繁瑣非常迅速點。

幸運的是，人們喜歡LEA Verou存在，似乎誰也不會休息，直到CSS的發展不能作出任何容易！ 執法機關已制定適當命名的立方貝塞爾，這基本上是一個操場，用于創建完全自定義的貝塞爾曲線，并在行動中比較它們預定義的關鍵字。 這意味著對你來說是不是繁瑣編輯小數在你那， cubic-bezier()函數，你可以參觀三次Bezier 和與曲線玩，直到你達到預期的效果。 方便多了。

速記關鍵詞給你計時功能開始與偉大的選擇，但它們之間的差異往往會出現輕微的。 只有當你開始創建自定義的貝塞爾曲線將你實現根治的效果的定時功能，可以對動畫。

試想一下，在下面的操作實例看動畫之間的差異極大，盡管他們都具有完全相同的持續時間值。

讓我們來仔細看看第一種例子，試著理解它為什么會產生這樣一個完全不同的效果。

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

這種定時功能和默認關鍵字之間的主要區別是對“發展”規模（y軸）的貝塞爾曲線的急劇傾斜。 這意味著該動畫會在短時間，在中間一長逐步暫停（其中曲線的水平下）。 這種模式形成鮮明的對比與什么我們已經成為用來與計時功能的關鍵字，它采取了相反的做法，與緩解期到來的開頭或動畫的結束，而不是在中間。

與現在的自定義貝塞爾曲線收入囊中，想必大家都不過用盡的功能cubic-bezier()函數，對不對？！ 你會這么認為，但這個狡猾的乞丐得到了更了它的袖子！

獲得創意與貝塞爾曲線

沒錯，這是真的：貝塞爾曲線變得更加精彩！ 誰想得到？ 范圍變寬的啟示，只在時間刻度（x軸）被限制在0-1的范圍在圖上，而級數尺度（y-軸）可以在下面和超越典型0-1范圍延伸。

級數的規模正是你會以為這就是與底端（0）標示動畫開始和頂端（1）標志著動畫的結尾。 通常情況下，三次Bezier曲線始終沿著這條發展規模向北行進在不同的強度，直到達到動畫的結束點。 然而，繪制點的這0-1范圍1和2以外的能力允許的曲線蜿蜒回落級數的規模，這實際上導致反向運動的動畫！ 與以往一樣，明白這一點的最好辦法是通過視覺效果：

你可以看到，點2的典型0-1范圍之外繪制為-0.5，而這又拉動曲線向下移動。 如果你看看下面的演示中，您將看到這會在動畫中間的彈跳效果。

相反，你可以把這個向后運動在動畫的開頭，也使其暫時超過其預期的終點運行。 你可以把它像走了幾步回得到一個良好的開端; 然后，到了最后，你的動力承載你過去你的目的地，導致你采取后退幾小步，以確保您在預定到達目的地。 看看實際的例子真正理解我們在談論這里。 此外，產生這樣的效果的貝塞爾曲線可以如下所示。

你現在應該對如何心中有數cubic-bezier()的典型0-1范圍之外的值可以實際影響如何動畫發揮出來。 我們可以看看整天搬家紙箱，但讓我們完成這個部分有一個例子，清楚地表明這種類型的創意計時功能。

這是正確的：我們正在制作動畫的浮動氣球！ …什么？ 難道你一直想做的事，與CSS？

在簡短的這個動畫是為了“增加氦”上點擊氣球，使其漂浮到了“天花板”，在那里將堅持前上方小幅反彈，因為它自然會。 使用cubic-bezier()的0-1范圍之外的值允許我們創建的反彈，并最終有助于產生逼真的效果。 下面的代碼片斷顯示了所使用的坐標cubic-bezier()函數，并由此產生的貝塞爾曲線下方出現了。

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

這個例子說明了特別好如何曲線轉化為生成的動畫，因為它反映了近乎完美。 首先，可以看到，該曲線從級數規模的開始行進到端在一條直線上，這表明氣球從動畫的開始行進到終點以恒定的速度。 然后，非常類似于氣球，曲線反彈的規模的頂端并進入反轉穩定和逐步恢復到前上方。 一切很簡單真的！

一旦你掌握了曲線和操縱它做你想做什么的技巧，你已經釘了。

定時功能和關鍵幀為基礎的CSS動畫

最后一件事在移動之前要注意（是的，有更多的覆蓋！）是當應用到CSS的關鍵幀動畫的定時功能的行為。 這些概念都是完全一樣的那些在轉型的例子，我們已經工作這么遠，但是有一個例外，那就是要注意的重要：當你申請一個定時功能的一組關鍵幀，它是每執行關鍵幀 ，而不是動畫作為一個整體。

為了澄清，如果您有四個關鍵幀移動一個框四角方形的，并且應用了我們在前面的氣球示例中使用的“反彈”的計時功能，然后每四個動作會經歷反彈，而不是整個動畫。 讓我們看到這個動作，并查看代碼。

 @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%關鍵幀沒有被定義，則該元素將簡單地返回到它的原始風格，這是所期望的結果在這種情況下，如此定義它是沒有必要的。 它是從該定時函數應用到每個四個關鍵幀的演示顯而易見的，因為它們每一個出現彈離所述容器的壁上。

如果你需要某些關鍵幀采取計時功能，它是從別人不同，然后繼續前進，直接申請一個獨立的計時功能價值的關鍵幀，如下面的代碼片段所示。

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

介紹的步驟（）計時功能

難道你以為我們已經做完了計時功能？ 哈，再想想，伙計！ 我告訴你，有很多更多的CSS定時功能比一些預定義的寬松功能！

在本節中，我們可以交換我們的曲線為直線，因為我們探討的“步進功能”，這是通過實現這個概念steps()的計時功能。

在steps()函數更多的是一種小眾的工具，而是要在工具箱仍然是有用的。 它使您能夠打破動畫分成幾個步驟，而不是通常的補間運動，我們已經習慣了。 例如，如果我們想動畫的正方形移動400個像素的權利四個步驟4秒鐘以上，然后將方會跳100像素每秒的權利，而不是在一個連續的動作動畫。 讓我們來看看，我們就需要為這個特殊的例子，這應該是一個絕對的微風現在我們已經解決了的復雜的語法cubic-bezier()函數！

 div { transition: 4s steps(4); } div:target { left: 400px; }

正如你可以看到，它的聲明的步數來劃分的動畫變成一件簡單的事情 – 但是記住，這個數字必須是正整數，所以沒有底片或小數。 然而，第二個，可選參數提供給我們稍微控制，這是可能的值start和end ，后者是默認值。

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

的值start將在每個步驟開始運行動畫，而的值end會在每一步結束時運行的動畫。 使用前面的“移動框”例如，下面的圖像做了解釋這些值之間的差異一個更好的工作。

可以看到，用一個值start ，該動畫一旦它被觸發時開始，而具有的值end ，它開始于（在這種情況下，正被觸發之后一秒鐘）的第一個步驟結束。

而只是為了確保本概述是真正全面的，也有兩個預定義的關鍵字的steps()函數： step-start和step-end 。 前者相當于steps(1, start) ，而后者則是相同的steps(1, end) 。

創造性的使用案例步進功能

好了，你可能沒有太大的必要，很多時候動畫在步驟一動箱，但也有很多其他很酷的使用的steps()函數。 例如，如果你把所有的精靈一個基本的動畫片，那么你可以使用這個技術，通過幀通過幀開始播放它，只用了幾個CSS屬性的！ 讓我們看一個演示，這使得它的功能的代碼。

 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像素寬），其中有包含16幀并排背景圖像（2000像素）。 此背景圖像是與框的左邊緣開始沖洗; 因此，所有我們現在需要做的是將背景圖像一路向左，讓所有16幀通過小矩形窗口。 與正常的動畫幀也只是滑動的視圖和列的背景圖像向左移動; 然而，與steps()函數中，背景圖像可以向左移動以16個步驟，從而確保每一個16幀的捕捉和輸出的圖，如需要的話。 就這樣，你在玩一個基本的動畫片只使用一個CSS過渡！

另一種創造性的使用steps()函數，我發現來禮貌LEA Verou（還有誰？），誰想出了一個特別聰明的打字動畫，我將打破你現在的。

首先，你需要一些文字，然后 – 遺憾的是 – 你需要知道到底有多少個字符，你正在使用的，因為你需要使用在CSS這個數字。 另一個要求是，該字體必須是等寬的，因此，所有的字符都是完全一樣的寬度。

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

我們正在使用的文字有11個字符。 隨著的幫助下ch的CSS單位，我們實際上可以用這個數字來定義段落的寬度，雖然我們應該為那些不支持本機瀏覽器中指定一個備用的寬度。 段落，然后給出一個堅實的黑色邊框的右側，這將成為光標。 現在一切都到位; 我們只需要制作動畫，這是非常簡單的。

兩個單獨的動畫是必需的：1的光標，一個用于鍵入。 為了實現前，我們需要做的是使黑色邊框閃爍，這再簡單不過。

 @keyframes cursor { 50% { border-color: transparent; } } .text { /* existing styles */ animation: cursor 1s step-end infinite; }

按計劃，黑色邊框之間簡單的黑色和透明的，然后不斷循環切換。 這是其中的steps()的功能是至關重要的，因為，沒有它，光標只會淡入淡出，而不是閃爍。

最后，打字動畫也很簡單。 所有我們需要做的是減少該段的寬度為零，在11個步驟（字符數）動畫回全寬前。

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

有了這個單個關鍵幀，文本，就會發現自己一個字母的時間超過8秒，而黑色border-right （光標）會連續閃爍了。 這個技術非常簡單但非常有效的。

剛剛加入到這個優秀的使用steps()由LEA Verou功能，倒車的效果，使文本顯示要刪除也是不在話下。 要做到這一點，只需更改關鍵幀的關鍵字，這樣它會讀取to ，而不是from ，然后添加一個animation-fill-mode的參數forwards到設定的animation規則。 這將確保一旦文本“刪除”（即當動畫已經完成），文本將保留刪除。 看看下面的例子中看到這個動作。

不足之處，以兩者的功能本節中的例子是，你必須預先知道，以指定的步驟正確的幀數或字符數，如果這個數的變化的話，那么你將需要改變代碼很好。 盡管如此， steps()函數顯示在這里它的價值，是一個很棒的作品的CSS定時功能的功能。

該瀏覽器支持情況

我們已經建立了，你不能使用一個CSS定時功能，除非瀏覽器支持CSS為基礎的動畫 – 即CSS轉換和CSS動畫（基于關鍵幀）模塊。 幸運的是，支持是非常偉大的形狀，這些天。

支持CSS過渡

盡管目前所有的瀏覽器版本已經降到了前綴轉換（這是真棒），你會是明智的，仍然包含-webkit-前綴，以滿足舊的移動瀏覽器。 我覺得需要包括-moz-和-o-前綴，但是，已經過去了，只要你逐步提高，你應該無論如何做什么！

支持CSS動畫

再次，關鍵幀動畫，只包含-webkit-前綴的旁邊不加前綴的代碼。

顯然，對于基于CSS的動畫瀏覽器的支持是絕頂，但是支持是稍微比較零散，當涉及到的定時功能的細微差別。 下表詳細解釋。

支持CSS的定時功能

再次，雖然支持全系列的計時功能功能某些瀏覽器已久一點，你可以看到，支持現在普遍的跨越目前的瀏覽器版本。

總結

所以，我們學到了關于CSS的計時功能？ 時間來回顧一下。

• 它們定義在動畫加速和減速。
• 還有更大量的對他們不僅僅是預定義的關鍵字。
• 您可以創建反彈效應cubic-bezier()的0-1范圍之外的值。
• 你可以打破一個動畫到任意數量的措施，而不是補間運動。
• 瀏覽器的支持是在夢幻般的形狀和不斷改進。

最后，雖然這些技術都全線現在支持，這將不是關于CSS3技術的文章，如果我沒有提到漸進增強。 從下往上總是工作; 也就是說，確保你的工作是可以接受的，對設備和瀏覽器為提高瀏覽器，可以應付他們才具有此功能，可以不處理訪問。