大概有多久沒有更新專欄文章了。半年？下半年忙到起飛，或者毫不誇張的說是發射？僅有的一點個人時間，上半年貢獻給了python，現在差不多已忘掉了七七八八（一首《涼涼》送給自己），下半年貢獻給了j**ascript，終於鼓起勇氣系統的開始學習js了（換台，梁靜茹《勇氣》走起）。本來想一直等等等，等到webapi學完後放個大招，svg+css動畫搭乘上j**ascript簡直如虎添翼長驅直入。但是，看掘金作者群裡討論的風生水起，突然感覺自己全然是陌生人（此處應放蔡健雅？），所以，更一篇文章刷一下存在感。
這篇程式設計客棧文章本來是寫的《svg+css動畫》小冊中的乙個小節選，小冊因為各種莫名的原因，擱淺了，擱淺……起航時間遙遙無期，但keyframes關鍵幀作為控制動畫在不同時間的狀態的重要元素，決定了七十二變的終極形態，所以這次更新專欄拿它下手。至於小冊嘛，如果能發的話，裡面再換成其他的案例就好，此為後話。
關鍵幀keyframes的基礎概念此處可省略，下面才是滿滿的乾貨。
案例：一路向前永不停歇的圓
因為只是來解釋關鍵幀，所以只搞了乙個簡易的僅水平位移的動效。www.cppcns.com因此，這篇文章得以脫離svg單獨存在僅和css3動畫屬性相關。
這是乙個努力從起點滾向終點的圓圈，整個路程為800px，但我在它的必經之路的三處設定了三個驛站。現在就要通過關鍵幀的定義讓圓圈在行進的路上進入驛站並稍作停頓。
1.先來乙個最基礎的
css部分定義乙個最基礎的位移動畫，4s完成，線性速度case-關鍵幀演示1-基礎 。
@keyframes move
100%
}.c_move /*both:運動結束後停留在終點*/
這個發揮作用主要是在定義了無限迴圈動畫時。
基礎的設定自然帶來毫無特色平淡無奇的基礎動效。
2.延遲開始
下面，我想讓圓圈在起點停留2s後再開始移動，第一反應是用動畫屬性中的延遲animation-delay，把時間定義成2s，行不行？行，但這裡用個更高階的方法。我們在定義關鍵幀時用了大量的百分比，這裡百分比值代表的是時間節點，也就是說關鍵幀定義的是不同時間節點的狀態屬性。下面再來看一張圖，這張圖一定不要和上面的路徑演示弄混了，這是一張動畫的時間軸的圖。
讓圓圈在起點停留2s那是表象說法，轉化成我們的動畫定義語言，就是在4s動畫週期內前2s是沒有動畫效果的。所以，動畫規則我來這樣定義：
@keyframes move
50%100%
}對照上面時間軸的分割來www.cppcns.com看，更容易理解一些，這樣就得到了在起點處停留2s後，在後面的2s完成整個動畫的動效。這裡亦或用一種更簡單的寫法為0%, 50%，屬性相同的可以合併在一起，用逗號分隔。 case-關鍵幀演示-延遲開始
3.提前結束
有了延遲開始的基礎，提前結束是不是已經可以類推出來了。為了區分一下，我讓動畫提前3s結束。照例先畫出時間軸的解析。
對應關鍵幀的定義如下：
@keyframes move
25%，100%
}最終結果圓圈一定是4倍速度全力以赴加速完成旅程（畢竟要把原來4s的時間壓縮到1s完成），然後怡然自得的在終點等待整個動畫時間結束。 case-關鍵幀演示-提前結束
4.中途停留
那些已準備妥當的驛站，現在可以發揮作用了，我希望圓圈這樣運動：整個旅程中僅在第乙個驛站（移動200px後）停留1s，稍作整頓。對映到時間軸上是什麼樣子的呢？
這裡，出現了一些看上去很奇怪的數字，需要解釋一下。先來明確一點，我們分析時間軸，最終要獲得是時間節點。針對我們的設計，停留1s，那運動的時間就是3s，而這3s的時間是分成兩部分的，第一部分是前200px，第二部分是後600px，因為是線性勻速，所以當時間軸分成a+b+c三部分後，在a時間段跑完200px，在c時間段跑完600px，計算出a對應的時間0.75s，c對應的時間2.25s，b的時間是停留的時間1s，再換算成對應的百分比，這就是最終中間兩個時間節點的計算方法。時間軸解析完成後，css部分的定義手tpxaeb到擒來：
@keyframes move
18.75%, 43.75% /*對應停留的1s*/
100%
}case-關鍵幀演示-第乙個驛站停留1s
5.像蟲洞一樣跳躍式前進
增加些難度，在中途任意點作停留已經不是什麼問題了，停留在乙個點和多個點是相同的思路，現在，我讓圓圈跳躍式前進，進入第乙個驛站後，停留1s，跨過第二個驛站，直接進入第三個驛站，停留1s，完成旅程。根據空間摺疊原理，200和600處發生了躍遷。分析時間軸：
重點看紅色的部分，那裡就是躍遷的時間點，在無時間變化的情況下位移了200px。按照時間軸的分析，css部分理論上是這樣的：
@keyframes move
25%,50%
50%,75%
100%
}效果如何呢？
完全和想象的不一樣，問題出在**呢？就是時間的50%節點處，瀏覽器可不知道你真實的想法，它只會以為你定義錯了，當有兩個相同的50%的關鍵幀的不同屬性值定義時，會自動忽略第乙個，而以最後乙個有效值為準，所以上面的定義相當於給瀏覽器傳達的訊息是這樣的：
@keyframes movwww.cppcns.come
25%50%,75% /*在位移600px後停留1s*/
100%
}這就是為什麼看上去是到達第一驛站後加速跑向第三個驛站，然後停留後再完成剩下的路程的原因。現在遊戲越來越有意思了，或許我們可以試試 騙過瀏覽器 。既然同樣的時間點只允許定義乙個屬性值，那如果我在緊鄰的旁邊增加乙個時間點來定義，會發生什麼？
@keyframes move
25%,50%
50.0001%,75%
100%
}看上面出現的**50.0001%**這個時間點，猜猜發生了什麼？這就是上面所謂的「騙過瀏覽器」的方法了。在50%→50.0001%這個區間，發生了400px（200→600）的位移變化。所以就得到了下面這種效果：case-關鍵幀演示-躍遷
從原理上來講，這是一種視覺欺騙，在極短的時間內在兩個位置間發生位移，因為時間短到可以忽略，所以會有一種跳躍的假象。
總結看完上面的幾種代表性例項，是不是對關鍵幀的定義有了乙個全新的認識，你可能會覺得對於「延遲開始」和「提前結束」這兩種需求，是完全可以通過定義延遲時間以及動畫週期的時間來達到相同的效果的，但是，對於乙個無限迴圈的動效而言，延遲開始永遠只作用一次，當動畫一旦開始進入周而復始的迴圈後，不再支援這個屬性設定。因此，如果可以的話，盡量用關鍵幀的定義來完成。
本文標題: 詳解css動畫屬性關鍵幀keyframes全解析
本文位址:
關鍵幀動畫CAKeyframeAnimation
介紹關鍵幀動畫之前先介紹一下什麼是補間動畫 補間動畫 兩個值發生改變，中間產生的動畫效果叫做部件動畫 關鍵幀動畫與基礎動畫的區別 基礎動畫只能是某個屬性的初始值到另乙個值產生的動畫效果 關鍵幀動畫支援多個值 values 或者乙個路徑 path 關鍵幀動畫的屬性 cakeyframeanimatio...
動畫（過渡動畫 關鍵幀動畫）
過渡動畫 寫到css樣式裡 transition all 1s ease in out 2s 變化曲線的值 ease 預設值,先快再快再慢 ease in 淡入 動畫剛開始的時候變化慢 ease out 淡出 動畫快結束的時候變化慢 ease in out 淡入淡出 開始慢,中間塊,結束慢 line...
CSS3 animation 關鍵幀 動畫
動畫 animation 首先定義一套關鍵幀 方法 keyframes 動畫名稱 25 50 75 100 注 可以從0 一直設定到100 然後呼叫 動畫名稱 方法 animation 1s 2s 動畫名稱 運動方式 動畫執行的次數 第乙個值 運動的總時間 第二個值 延遲的運動時間 第三個值 動畫名...