css3中新增的新屬性animation是用來為元素實現動畫效果的。但是animation無法單獨擔當起實現動畫的效果。這個我們會在後面講到。我們先來講講animation的相關用法。這裡我的**均是採用標準的css3規範書寫，大家使用的時候為了相容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等字首以適應不同的瀏覽器。
animation有且可以設定許多個值，這意味著他也有許多個下分的小屬性。
正如之前講到的scale（）可以生出scalex（）、scaley（）等。
下面我就來細細的講述各個小分屬性
animation-name
第乙個屬性動畫名稱，這個動畫名稱是在@key-frames當中規定的，這也是我在開始的時候就說了animation無法單獨當起動畫實現的原因。因為實質性的動畫效果都是在@key-frames當中設定好的。
例項：animation-name：myanimation；
animation-duration
第二個屬性規定了動畫時間。
也就是執行動畫所執行的時間，他的單位是s或者hg毫秒，預設情況下為0。
例項：animation-duration：5s
animation-timing-function
第三個屬性定義了實現動畫的方式（速度曲線），有這麼幾個值可以選擇：
ease（預設的：慢-快-慢）、ease-in（緩入）、ease-out（緩出）、ease-in-out、linear（勻速）、cubic-bezier（n,n,n,n）【每個n的取值均在0-1之間】
step-start：馬上轉跳到動畫結束狀態。
step-end：保持動畫開始狀態，直到動畫執行時間結束，馬上轉跳到動畫結束狀態。
steps([, [ start | end ] ]?)：第乙個引數number為指定的間隔數，即把動畫分為n步階段性展示，第二個引數預設為end，設定最後一步的狀態，start為結束時的狀態，end為開始時的狀態，若設定與animation-fill-mode的效果衝突，而以animation-fill-mode的設定為動畫結束的狀態。這個太複雜了！
animation-delay
第四個屬性規定了動畫的延遲執行時間，及延遲多久才執行，預設情況下為0；
若為證書，則按設定的時間執行；
若為負數，則截去相應的動畫時間，從動畫中間執行。比如我的動畫時間為20s，現在設定該值為-5s，那麼動畫最後執行的時間是後面的15秒。
animation-iteration-count
規定動畫執行的次數，預設的情況下執行1次，你也可以設定為5，或者10；如果你想讓動畫一直執行下去的話：將值設定為infinite即可，它表示無限的意思。
向下面的 小圈的旋轉就是無限的 迴圈rotate實現的，這可以省去製作一張gif動畫圖所花費的大量時間。
CSS3的新屬性
1.線性漸變 linear 線性 gradient 漸變 background image webkit linear gradient top，red 50 yellow 50 yellow90 2.徑向漸變 可以設定數值 百分比 英文 background image webkit radial...
css3的新屬性陰影屬性
css3的新屬性陰影屬性 box shadow ie9 firefox 4 chrome opera 以及 safari 5.1.1 支援 box shadow 屬性。語法是 box shadow h shadow v shadow blur spread color inset box shado...
css3邊框新屬性
通過css3，可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...