世界人民，系好安全帶，緊緊抓住，因?yàn)槟闶且?jīng)歷真正的驚心動(dòng)魄的興奮，因?yàn)槟隳苷莆盏木薮笥腥さ腃SS計(jì)時(shí)功能的復(fù)雜性！

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

首先，讓我們來設(shè)置場景，并確保我們都熟悉的定時(shí)功能相關(guān)的場景。 至于提到的功能，當(dāng)你工作在CSS動(dòng)畫，其中包括CSS過渡以及基于關(guān)鍵幀動(dòng)畫的境界變?yōu)榭捎谩?那么，它究竟是什么和它有什么作用？

CSS的定時(shí)功能的解釋

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

雖然它不會影響動(dòng)畫的實(shí)際持續(xù)時(shí)間，它可能對如何快或慢的用戶感知動(dòng)畫是有深遠(yuǎn)的影響。 如果你不賣的它的實(shí)際目的，學(xué)懂，然后用我堅(jiān)持在這里，因?yàn)槎〞r(shí)功能特性得到了很多更有趣的比定義提出。

注意 ：有一個(gè)名為“計(jì)時(shí)功能?！碑?dāng)我把這個(gè)“財(cái)產(chǎn)”，其實(shí)我指的是既沒有實(shí)際財(cái)產(chǎn)transition-timing-function和animation-timing-function特性。

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

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

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

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

但是這是一個(gè)有點(diǎn)無聊。 而默認(rèn)值通常足以滿足標(biāo)準(zhǔn)懸停事件，而有關(guān)，如果你正在做的東西多一點(diǎn)實(shí)質(zhì)性的，那么計(jì)時(shí)功能是一個(gè)嚴(yán)重的伎倆微調(diào)動(dòng)畫！

不管怎么說，你現(xiàn)在有定時(shí)功能做什么的想法。 讓我們來看看它是怎么做的。

尋找引擎蓋下

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

該怎么辦？！

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

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

因?yàn)檫@條曲線是由四個(gè)點(diǎn)組成，我們把它作為一個(gè)“立方”貝塞爾曲線，而不是一個(gè)“二次”曲線（三個(gè)點(diǎn)）或“四次”曲線（5分）。

引入立方貝塞爾（）函數(shù)

那么現(xiàn)在，這就是事情變得很興奮，因?yàn)槲医沂?，你?shí)際上可以得到訪問該曲線通過cubic-bezier()函數(shù)，它可以簡單地代替計(jì)時(shí)功能屬性值的關(guān)鍵字的使用。 我明白，你可能需要一些時(shí)間來控制你的興奮……

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

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

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

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

獲得舒適與語 ??法，以及它是如何創(chuàng)建的曲線，并與動(dòng)畫的物理效果，我?guī)闳ネㄟ^五個(gè)計(jì)時(shí)功能的關(guān)鍵字，它們相當(dāng)于cubic-bezier()值和由此產(chǎn)生的影響上的動(dòng)畫。

易于在出

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

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

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

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

緩解

在ease的關(guān)鍵字是CSS計(jì)時(shí)功能屬性的默認(rèn)值，它實(shí)際上是非常相似的前一個(gè)，雖然它簡化了在緩和出更逐步之前更快的速度。

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

你可以看到一個(gè)清晰的傾斜的曲線開始，而結(jié)束時(shí)更抽出，直接轉(zhuǎn)換到這個(gè)計(jì)時(shí)功能對動(dòng)畫中的物理效果。 不要忘了審查的每一個(gè)例子來比較的影響后，參考前面的演示。

易用性并緩解出

在ease-in和ease-out關(guān)鍵字是勿庸置疑，絕對對立。 前者例在維持全速一直到終點(diǎn)之前，而后者命中全速馬上回落至終點(diǎn)前的蝙蝠。 在ease-in-out關(guān)鍵字，我們看了以前就是因?yàn)檫壿嫿ㄗh，這兩個(gè)貝塞爾曲線的完美結(jié)合。

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

線性

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

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

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

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

創(chuàng)建自定義加速模式與立方貝塞爾（）函數(shù)

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

您現(xiàn)在應(yīng)該能夠繪制點(diǎn)1和2上使用的圖形cubic-bezier()函數(shù)，并且具有這將如何影響動(dòng)畫的一個(gè)非常堅(jiān)實(shí)的想法。 然而，考慮到你在繪制的圖形，你通?？床怀鰜?，很明顯，這可能會非常繁瑣非常迅速點(diǎn)。

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

速記關(guān)鍵詞給你計(jì)時(shí)功能開始與偉大的選擇，但它們之間的差異往往會出現(xiàn)輕微的。 只有當(dāng)你開始創(chuàng)建自定義的貝塞爾曲線將你實(shí)現(xiàn)根治的效果的定時(shí)功能，可以對動(dòng)畫。

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

讓我們來仔細(xì)看看第一種例子，試著理解它為什么會產(chǎn)生這樣一個(gè)完全不同的效果。

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

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

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

獲得創(chuàng)意與貝塞爾曲線

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

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

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

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

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

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

在簡短的這個(gè)動(dòng)畫是為了“增加氦”上點(diǎn)擊氣球，使其漂浮到了“天花板”，在那里將堅(jiān)持前上方小幅反彈，因?yàn)樗匀粫?使用cubic-bezier()的0-1范圍之外的值允許我們創(chuàng)建的反彈，并最終有助于產(chǎn)生逼真的效果。 下面的代碼片斷顯示了所使用的坐標(biāo)cubic-bezier()函數(shù)，并由此產(chǎn)生的貝塞爾曲線下方出現(xiàn)了。

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

這個(gè)例子說明了特別好如何曲線轉(zhuǎn)化為生成的動(dòng)畫，因?yàn)樗从沉私跬昝馈?首先，可以看到，該曲線從級數(shù)規(guī)模的開始行進(jìn)到端在一條直線上，這表明氣球從動(dòng)畫的開始行進(jìn)到終點(diǎn)以恒定的速度。 然后，非常類似于氣球，曲線反彈的規(guī)模的頂端并進(jìn)入反轉(zhuǎn)穩(wěn)定和逐步恢復(fù)到前上方。 一切很簡單真的！

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

定時(shí)功能和關(guān)鍵幀為基礎(chǔ)的CSS動(dòng)畫

最后一件事在移動(dòng)之前要注意（是的，有更多的覆蓋?。┦钱?dāng)應(yīng)用到CSS的關(guān)鍵幀動(dòng)畫的定時(shí)功能的行為。 這些概念都是完全一樣的那些在轉(zhuǎn)型的例子，我們已經(jīng)工作這么遠(yuǎn)，但是有一個(gè)例外，那就是要注意的重要：當(dāng)你申請一個(gè)定時(shí)功能的一組關(guān)鍵幀，它是每執(zhí)行關(guān)鍵幀 ，而不是動(dòng)畫作為一個(gè)整體。

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

 @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)鍵幀沒有被定義，則該元素將簡單地返回到它的原始風(fēng)格，這是所期望的結(jié)果在這種情況下，如此定義它是沒有必要的。 它是從該定時(shí)函數(shù)應(yīng)用到每個(gè)四個(gè)關(guān)鍵幀的演示顯而易見的，因?yàn)樗鼈兠恳粋€(gè)出現(xiàn)彈離所述容器的壁上。

如果你需要某些關(guān)鍵幀采取計(jì)時(shí)功能，它是從別人不同，然后繼續(xù)前進(jìn)，直接申請一個(gè)獨(dú)立的計(jì)時(shí)功能價(jià)值的關(guān)鍵幀，如下面的代碼片段所示。

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

介紹的步驟（）計(jì)時(shí)功能

難道你以為我們已經(jīng)做完了計(jì)時(shí)功能？ 哈，再想想，伙計(jì)！ 我告訴你，有很多更多的CSS定時(shí)功能比一些預(yù)定義的寬松功能！

在本節(jié)中，我們可以交換我們的曲線為直線，因?yàn)槲覀兲接懙摹安竭M(jìn)功能”，這是通過實(shí)現(xiàn)這個(gè)概念steps()的計(jì)時(shí)功能。

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

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

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

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

的值start將在每個(gè)步驟開始運(yùn)行動(dòng)畫，而的值end會在每一步結(jié)束時(shí)運(yùn)行的動(dòng)畫。 使用前面的“移動(dòng)框”例如，下面的圖像做了解釋這些值之間的差異一個(gè)更好的工作。

可以看到，用一個(gè)值start ，該動(dòng)畫一旦它被觸發(fā)時(shí)開始，而具有的值end ，它開始于（在這種情況下，正被觸發(fā)之后一秒鐘）的第一個(gè)步驟結(jié)束。

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

創(chuàng)造性的使用案例步進(jìn)功能

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

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

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

另一種創(chuàng)造性的使用steps()函數(shù)，我發(fā)現(xiàn)來禮貌LEA Verou（還有誰？），誰想出了一個(gè)特別聰明的打字動(dòng)畫，我將打破你現(xiàn)在的。

首先，你需要一些文字，然后 – 遺憾的是 – 你需要知道到底有多少個(gè)字符，你正在使用的，因?yàn)槟阈枰褂迷贑SS這個(gè)數(shù)字。 另一個(gè)要求是，該字體必須是等寬的，因此，所有的字符都是完全一樣的寬度。

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

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

兩個(gè)單獨(dú)的動(dòng)畫是必需的：1的光標(biāo)，一個(gè)用于鍵入。 為了實(shí)現(xiàn)前，我們需要做的是使黑色邊框閃爍，這再簡單不過。

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

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

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

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

有了這個(gè)單個(gè)關(guān)鍵幀，文本，就會發(fā)現(xiàn)自己一個(gè)字母的時(shí)間超過8秒，而黑色border-right （光標(biāo)）會連續(xù)閃爍了。 這個(gè)技術(shù)非常簡單但非常有效的。

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

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

該瀏覽器支持情況

我們已經(jīng)建立了，你不能使用一個(gè)CSS定時(shí)功能，除非瀏覽器支持CSS為基礎(chǔ)的動(dòng)畫 – 即CSS轉(zhuǎn)換和CSS動(dòng)畫（基于關(guān)鍵幀）模塊。 幸運(yùn)的是，支持是非常偉大的形狀，這些天。

支持CSS過渡

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

支持CSS動(dòng)畫

再次，關(guān)鍵幀動(dòng)畫，只包含-webkit-前綴的旁邊不加前綴的代碼。

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

支持CSS的定時(shí)功能

再次，雖然支持全系列的計(jì)時(shí)功能功能某些瀏覽器已久一點(diǎn)，你可以看到，支持現(xiàn)在普遍的跨越目前的瀏覽器版本。

總結(jié)

所以，我們學(xué)到了關(guān)于CSS的計(jì)時(shí)功能？ 時(shí)間來回顧一下。

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

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