css3 animation動畫對應屬性解釋

標籤：

animation

Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] ]*

 

animation-timing-function：

定義動畫的速度曲線

ease：動畫以低速開始，然後加快，在結束前變慢。

linear：勻速

ease-in：動畫以低速開始

ease-out：動畫以低速結束

ease-in-out：動畫以低速開始和結束，相對於ease緩慢，速度更均勻

step-start：按keyframes設定逐幀顯示，第一幀為keyframes設定的第一幀。

step-end：按keyframes設定逐幀顯示，第一幀為樣式的初始值。

steps(<number>[, [ start | end ] ]?)：把keyframes裡設定的一幀等分為幾幀，start為第一次顯示第一幀，end第一次顯示樣式的初始值，例如：steps(4,start)

cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。貝茲曲線限制了首尾兩控制點的位置，通過調整中間兩控制點的位置可以靈活得到常用的動畫效果

 

animation-iteration-count

動畫迭代次數，預設就1次，可以設定2次，3次，4次，…infinite表示無限

 

animation-duration

指一個動畫周期期間。單位秒s或毫秒ms.

 

animation-delay

指動畫延時執行時間。單位秒s或毫秒ms.

 

animation-direction

指動畫時間軸上幀前進的方向。

normal:預設值，表示一直向前，最後一幀結束後回到第一幀

reverse:與normal的運行方向相反

alternate:往前播放完了之後，然後再倒帶，倒帶到頭了再往後播放

alternate-reverse:與alternate的運行方向相反

 

animation-fill-mode

設定動畫結束後的狀態

none：預設值。不設定對象動畫之外的狀態，DOM未進行動畫前狀態

forwards：設定對象狀態為動畫結束時的狀態，100%或to時，當設定animation-direcdtion為reverse時動畫結束後顯示為keyframes第一幀

backwards：設定對象狀態為動畫開始時的狀態,（測試顯示DOM未進行動畫前狀態）

both：設定對象狀態為動畫結束或開始的狀態，結束時狀態優先

 

animation-play-state

paused:設定該屬性使動畫暫停

running:設定該屬性使動畫繼續播放

動畫運行狀態，暫停或繼續播放，屬性為：running（預設）以及paused. 這個什麼時候有用的，使用animation實現視頻播放效果的時候

 

瀏覽器支援情況（webkit核心瀏覽器需加"-webkit-"首碼）：

 

簡單舉例：

 

[html] view plain copy  

1. div {  
2.   animation-name: diagonal-slide;  
3.   animation-duration: 5s;  
4.   animation-iteration-count: 10;  
5. }  
6.   
7. @keyframes diagonal-slide {  
8.   
9.   from {  
10.     left: 0;  
11.     top: 0;  
12.   }  
13.   
14.   to {  
15.     left: 100px;  
16.     top: 100px;  
17.   }  
18.   
19. }  

css3 animation動畫對應屬性解釋