檢索或設置對象動畫時間之外的狀態。

這幾天在手機微信分享頁面時，有用到css3動畫，現將其一些屬性列舉出來，方便以后學習查找。

動畫的一些屬性：

animation-name: none | <identifier> [ , none | <identifier> ]*;定義一個或多個動畫名稱。

animation-duration: <time>[,<time>]*; 指定對象動畫的持續時間 。

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定對象動畫的持續時間 。

animation-delay: <time>; 指定對象動畫的持續時間 。

animation-iteration-count: <number>|infinite; 指定對象動畫循環播放的次數。

animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定對象動畫運動的方向。

animation-play-state: running | paused 檢索或設置對象動畫的狀態。

animation-fill-mode: none | forwards | backwards | both; 檢索或設置對象動畫時間之外的狀態。

過渡屬性：

transform呈現的是一種變形結果，而Transation呈現的是一種過渡，通俗點說就是一種動畫轉換過程，如漸顯、漸弱、動畫快慢等。transition和transform是兩種不同的動畫模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同時使用。

transition是一個復合屬性，可以同時定義transition-property、transition-duration、transition-timing-function、transition-delay子屬性值。

transition-duration用來定義轉換動畫的時間長度，即從舊屬性換到新屬性花費的時間，單位為秒。

默認情況下動畫過渡時間為0秒，所以當我們指定元素動畫時會看不到過渡的過程直接看到結果。

transition-delay用來定義過渡動畫的延遲時間。

時間可為正整數，負整數和0，非0的時候必須設置單位為s（秒）或ms（毫秒）；

為負數的時候過渡的動作會從該時間點開始顯示，之前的動作被截斷；為正數的時候過渡的動作會延遲觸發。

transition-timing-function用來定義過渡動畫的效果。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]* ;設置動畫執行的方式（緩動效果）。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈