CSS3 animation 逐幀動畫

前言

css3 loading動畫

animation介紹

定義和用法

animation屬性是一個簡寫屬性，用於設置六個動畫屬性。

animation: name duration timing-function delay interation-count direction;

值	描述
animation-name	規定須要綁定到選擇器的keyframe名稱
animation-duration	規定完成動畫所花費的時間，以秒或毫秒爲計
animation-timing-function	規定動畫的速度曲線
animation-delay	規定動畫開始以前的延遲
animation-interation-count	規定動畫播放次數
animation-direction	規定動畫是否應該輪流反向播放

 

animation-timing-function有9個值，ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

• ease ： 動畫緩慢開始，接着加速，最後減慢，默認值（cubic-bezier(0.25,0.1,0.25,1)）
• linear：動畫從頭至尾的速度是相同的（等於 cubic-bezier(0,0,1,1)）
• ease-in：以低速開始（等於 cubic-bezier(0.42,0,1,1)）
• ease-out：以低速結束（等於 cubic-bezier(0,0,0.58,1)）
• ease-in-out：動畫以低速開始和結束（等於 cubic-bezier(0.42,0,0.58,1)）
• steps([n, [ start | end ] ]?) 階梯函數，這個函數能夠把動畫平均劃分爲基本相等的，n是一個天然數，意思是把一個動畫平均分紅n等分，直到平均地走完這個動畫。跟linear是有區別的。linear是把動畫做爲一個總體，中間沒有斷電，而steps是把動畫分段平均執行。

 

animation-direction，規定動畫是否反方向運動，值：normal | reserve | alterative-reserve | alterative

• 　reserve 　　  　　　　-- 反向轉動
• 　alterative　　　　　　-- 一開始正常轉，播完一次後再反向轉，假如設置animation-iteration-count:1則該值無效
• 　　alterative-reserve 　 -- 一開始爲反向轉動，播完一次以後按照迴歸正常轉動，交替轉動，設置count爲1，則該值無效

animation-play-state，新增屬性，定義動畫是否運行或暫停，屬性值爲running和paused

animation-fill-mode，定義動畫播放完後的狀態，值爲none | forwards | backwards | both

　　forward指停在動畫播放完的那個狀態，backwards指回到動畫開始的狀態，

瀏覽器支持

 

 

參考連接：

利用css3-animation來製做逐幀動畫