1. animation簡介
   ? animation無疑是CSS3里最牛的功能。可以采用較少的代碼制作超炫的動畫。
   ? animation制作動畫的原理類似與flash，采用關鍵幀的概念。
   ? animation可以說是transition的功能加強版，可以控制的更細膩。

2. transition
   ? Transition是實現過渡效果的CSS3屬性，從視覺效果上觀察Transition可讓HTML元素實現動態效果形成一個簡單的動畫。
   ? Transition屬性中也有很多和animation相似的地方。

3. Transition復習
   ? transition-property(規定設置過渡效果的 CSS 屬性的名稱。)
   ? transition-duration(規定完成過渡效果需要多少秒或毫秒。)
   ? transition-timing-function(規定速度效果的速度曲線。)
   ? transition-delay(規定過度效果的延遲。)

4. Animation中的屬性
   ? animation-name(動畫命名)
   ? animation-duration(動畫持續時間)
   ? animation-timing-function(動畫速度曲線)
   ? animation-iteration-count(動畫播放次數)
   ? animation-direction(完成一次動畫后的運行方式)
   ? animation-play-state(控制動畫的播放狀態)
   ? animation-fill-mode(規定動畫在播放之前或之后，其動畫效果是否可見)

5. Transition與Animation的區別
   ? transition是過渡效果，animation是動畫。
   ? transition只能指定起始狀態和結束狀態的動畫效果, animation可以有多個關鍵幀設置實現更加豐富的動畫效果。
   ? transition需要有動作(hover等)來觸發才能執行，animation可以自己執行。
   ? 兩者支持的屬性不同，animation多出iteration-count, direction,play-state等屬性，增加可控性。

6. animation-name
   ? animation-name: keyframename|none;
   ? 為 @keyframes 動畫規定一個名稱。
   ? none為默認值，既沒有動畫效果。

7. animation-duration
   ? animation-duration: time;
   ? 定義動畫完成一個周期所需要的時間，以秒或毫秒計。

8. animation-timing-function
   ? animation-timing-function: value;
   ? 規定動畫的速度曲線。
   ? linear：動畫從頭到尾的速度是相同的。
   ? ease：默認。動畫以低速開始，然后加快，在結束前變慢。
   ? ease-in：動畫以低速開始。
   ? ease-out：動畫以低速結束。
   ? ease-in-out：動畫以低速開始和結束。

9. animation-delay
   ? animation-delay: time;
   ? 定義動畫的開始時間（延遲時間）。
   ? time取值為秒或毫秒計，默認值是 0。

10. animation-iteration-count
    ? animation-iteration-count: n|infinite;
    ? 指定元素播放動畫的循環次數。
    ? n:定義動畫播放次數的數值。
    ? infinite:規定動畫應該無限次播放。

11. animation-direction
    ? animation-direction: normal|alternate;
    ? 定義是否應該輪流反向播放動畫。
    ? normal：默認值。動畫應該正常播放。
    ? alternate：動畫輪流反向播放。

12. animation-play-state
    ? animation-play-state: paused|running;
    ? 屬性規定動畫正在運行還是暫停。
    ? paused可以讓動畫暫定播放，running可以讓動畫繼續播放。

13. animation-fill-mode
    ? animation-fill-mode:none|forwards|backwards|both;
    ? 規定動畫在播放之前或之后，其動畫效果是否可見。
    ? none :在應用動畫時,在經過延時時間后執行動畫之前及動畫結束后，使元素呈現默認狀態。
    ? forwards:表示動畫結束后,元素就是當前動畫結束時候的狀態。
    ? backwards:表示動畫開始之前,元素處于keyframe是"from"或"0%"關鍵幀的狀態。
    ? both:forwards + backwards

14. Keyframes
    ? 關鍵幀由”@keyframes”開頭，后面緊跟”動畫名稱”和{}。花括號中就是一些不同時間段的樣式規則。
    ? “@keyframes”中的樣式由多個百分比構成，在“0%” 到“100%”中間，可以創建多個百分比。這個百分比即在動畫過程中的關鍵幀位置。
    ? 每一個百分比中都要給動畫效果元素加上不同的屬性，從而讓元素在一種不斷變化的狀態。
    ? 我們可以使用”from””to”來代表一個動畫的開始和結束幀位置。
    ? 當使用百分比表示起始幀時，使用“0%”，不能去掉百分號。keyframes只接受百分比數值。

15. @keyframes寫法
    ? @keyframes Name {
    from { Properties:Properties value; }
    Percentage { Properties:Properties value; }
    to { Properties:Properties value; }
    }

16. @keyframes寫法
    ? @-webkit-keyframes Name {
    0% { Properties:Properties value; }
    Percentage { Properties:Properties value; }
    100% { Properties:Properties value; }
    }

17. Animation實例
    ? @-webkit-keyframes box1 {
    0% { margin-left: 100px; background: green; }
    40% { margin-left: 150px; background: orange; }
    60% { margin-left: 75px; background: blue; }
    100% { margin-left: 100px; background: red; }
    }

18. 調用animation的方法
    ? .box1 { width: 50px; height: 50px; margin-left: 100px; background: blue;
    -webkit-animation-name:'box1';/動畫屬性名/
    -webkit-animation-duration: 5s;/動畫持續時間/
    -webkit-animation-timing-function: ease-in-out; /動畫頻率/

19 .調用animation的方法
-webkit-animation-delay: 2s;/動畫延遲時間/
-webkit-animation-iteration-count: 10;/定義循環資料，infinite為無限次/
-webkit-animation-direction: alternate;/定義動畫循環方式/
}

3D動畫

動畫的基本編寫方式已經介紹完了，相信一些簡單的2d動畫已經難不倒大家了接下來咱們看看更加酷炫的3d動畫是如何編寫的呢？

CSS3transform改變，使…變形

20. transform
    ? transform的含義是：改變，使…變形；轉換。
    ? transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotateX() 和 rotateY() ，以此類推。

21. rotate
    ? 含義：旋轉；
    ? 如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。其中“deg”是“度”的意思，如“10deg”表示“10度”。
    ? 例: transform:rotate(30deg)

22. transform-origin
    ? 含義：旋轉的基點。
    ? 該屬性提供2個參數值，第一個用于橫坐標，第二個用于縱坐標；如果只提供一個，該值將用于橫坐標，縱坐標將默認為50%。
    ? percentage：用百分比指定坐標值。可以為負值。
    ? length：用長度值指定坐標值。可以為負值。
    ? left center right是水平方向取值，而top center bottom是垂直方向的取值。

23. translate
    ? 含義：變動，位移；
    ? 二維坐標系中translate我們分為三種情況：
    ? translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；
    ? translateX(x)僅水平方向移動（X軸移動）；
    ? translateY(Y)僅垂直方向移動（Y軸移動）；
    ? 三維坐標系同理。
    ? 例： transform:translate(100px,20px)

24. scale
    ? 含義：縮放。
    ? 同樣以二維坐標系為例scale分為3種情況：
    ? scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；
    ? scaleX(x)元素僅水平方向縮放（X軸縮放）；
    ? scaleY(y)元素僅垂直方向縮放（Y軸縮放）；
    ? 縮放基數為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。
    ? 三維坐標系同理。
    ? 例： transform:scale(2,1.5)

25. skew
    ? 含義：扭曲，傾斜；
    ? 還是以二維坐標系為例scale分為3種情況：
    ? skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
    ? skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
    ? skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）；
    ? 三維坐標系同理。
    ? 例： transform:skew(30deg,10deg)

注意

在編寫3d動畫時要為元素添加transform-style: preserve-3d；屬性。

為了讓動畫效果兼容各大瀏覽器我們要在屬性前面添加相應的內核前綴。各個瀏覽器內核前綴總結

3D動畫講到這里也要接近尾聲了。

說了這么多不知道大家記住了多少。咱們再做個小練習鞏固一下吧~

作業：利用animation動畫制作一個有個性的3d立方體。