1.瀏覽器支持情況

Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。

Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

2.基本用法

animation:name duration timing-function delay iteration-countdirection;

屬性

animation 屬性是一個簡寫屬性，用于設(shè)置八個動畫屬性：

animation-name? 規(guī)定需要綁定到選擇器的 keyframe 名稱。。

animation-duration 規(guī)定完成動畫所花費的時間，單位秒或毫秒，默認是0

animation-timing-function 規(guī)定動畫的速度曲線

animation-delay? 規(guī)定在動畫開始之前的延遲。

animation-iteration-count? 規(guī)定動畫應該播放的次數(shù)。

animation-direction 規(guī)定是否應該輪流反向播放動畫。

animation-play-state 控制動畫的暫停處理

animation-fill-mode

注釋：請始終規(guī)定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

語法

1. animation-name：keyframename|none;

2. animation-duration:time;

3. animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

? ? ? ? linear 動畫從頭到尾的速度是相同的。

? ? ? ? ease? 默認。動畫以低速開始，然后加快，在結(jié)束前變慢。

? ? ? ? ease-in 動畫以低速開始。

? ? ? ? ease-out 動畫以低速結(jié)束。

? ? ?? ease-in-out? 動畫以低速開始和結(jié)束。

? ? ? ? cubic-bezier(n,n,n,n)??? 在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

4. animation-delay：time;

5. animation-iteration-count:n | infinite

? ? ? ? ? n 定義動畫播放次數(shù)的數(shù)值。

? ? ? ? ? infinite? 規(guī)定動畫應該無限次播放。

6. animation-direction:normal | alternate;

? ? ? ? ? normal 默認值。動畫應該正常播放。

? ? ? ? ? alternate 動畫應該輪流反向播放。

7. animation-play-state: paused