深入理解CSS3 Animation 幀動畫

我們知道css3的animation有八個屬性

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation-fill-mode

animation-timing-function

其中1-7大多都有介紹，但是animation-timing-function是控制時間的屬性

在取值中除了常用到的 三次貝塞爾曲線 以外，還有個讓人比較困惑的steps() 函式

animation預設以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的

除了ease，linear、cubic-bezier之類的過渡函式都會為其插入補間。但有些效果不需要補間，只需要關鍵幀之間的跳躍，這時應該使用steps過渡方式

animation-timing-function 規定動畫的速度曲線

以上w3school**上給的使用方法，但是漏掉乙個很重要的steps

簡單的來說，我們一直使用animation基本都是實現線性漸變的動畫

如看效果 線性動畫

擷取css如下

.test1 

@-webkit-keyframes skyset 
50%100% 
}

如果要實現幀動畫效果而不是線性的變化就需要引入step這個值了，換句話就是沒有過渡的效果，而是一幀幀的變化

同樣可以看測試 幀動畫

理解steps

steps 函式指定了乙個階躍函式

第乙個引數指定了時間函式中的間隔數量（必須是正整數）

第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。

step-start等同於steps(1,start)，動畫分成1步，動畫執行時為開始左側端點的部分為開始；

step-end等同於steps(1,end)：動畫分成一步，動畫執行時以結尾端點為開始，預設值為end。

看看w3c的規範 transition-timing-function

steps第乙個引數的錯誤的理解：

steps(5，start)

steps() 第乙個引數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，估計大多數人理解就是keyframes寫的變化次數

例如:

@-webkit-keyframes circle 

25%{}
50%{}
75%{}
100%{}
}

為什麼會出現這種理解錯誤，我們看乙個例子

keyframes的關鍵幀是只有2個規則的時候，假如我們有一張400px長度的雪碧圖

@-webkit-keyframes circle 

100%
}

實際內部會執行這樣乙個關鍵幀效果

@-webkit-keyframes circle 

25% 
50% 
75%100%
}

將這個規則稍微修改下，加入乙個50%的狀態

@-webkit-keyframes circle 

50% 
100%
}

此刻你會很迷惑，所以關鍵要理解第乙個引數的針對點，首先引入乙個核心點：

timing-function 作用於每兩個關鍵幀之間，而不是整個動畫

那麼第乙個引數很好理解了，steps的設定都是針對兩個關鍵幀之間的，而非是整個keyframes，所以第乙個引數對 - 次數對應了每次steps的變化

換句話說也是 0-25 之間變化5次，  25-50之間 變化5次 ，50-75 之間變化5次，以此類推

第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end

通過案例看下 step-start，step-end 的區別

@-webkit-keyframes circle 

50%100% 
}

step-end  ： 紅色與黃色相互切換

2個引數都會選擇性的跳過前後部分，start跳過0%，end跳過100%

step-start在變化過程中，都是以下一幀的顯示效果來填充間隔動畫，所以0% 到 50%  直接就顯示了黃色yellow

step-end與上面相反，都是以上一幀的顯示效果來填充間隔動畫，所以0% 到 50% 直接就顯示了紅色red

引用w3c的一張step的工作機制圖

總結：steps函式，它可以傳入兩個引數，第乙個是乙個大於0的整數，他是將間隔動畫等分成指定數目的小間隔動畫，然後根據第二個引數來決定顯示效果。

第二個引數設定後其實和step-start，step-end同義，在分成的小間隔動畫中判斷顯示效果。可以看出：steps(1, start) 等於step-start，steps(1,end)等於step-end

最核心的一點就是：timing-function 作用於每兩個關鍵幀之間，而不是整個動畫

by aaron：

深入理解CSS背景

背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...

深入理解CSS浮動

float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...

深入理解CSS背景

背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...