學習css3動畫
css3動畫這個對於我們前端攻城獅來說是個既熟悉又陌生的東東，前兩年有好些個大牛都在研究使用它，但最近一段熱度降了下來，可以說這個東東各大鐘情於大的公司都有自己的一套解決使用方案，但我在網上苦苦的尋找，沒有發現，可能是我不夠用心。
但我今天想說的是如何製作自己的一套css3動畫製作方案，可能是很多前端工程師夢寐以求的，我也不例外。做一套適合自己的行之有效的解決方案說前來容易，但真正的做起來發現還是有一定的難度的。
我們前端攻城獅的進階之路一般是使用—>熟練使用—>模仿—>總結—>歸納。這是一個由淺入深的過程。
作為一個有一兩年開發經驗的web前端工程師來說，下一步的進階之路（升職，加薪，迎娶白富美……）就是分析一些成熟的css3動畫框架，在這之前你可能自己寫了一些，或者模仿了一些案例，但我想這還不足以讓你自己寫一份適合自己的解決方案，你需要要更系統的研究一下（天賦異秉著不在此列）。我分析的框架有aimate.css, 易企秀（H5場景），fulpage.js框架，同時我也模仿layui，小米官網，iconfont等一些網站的動畫效果，通過不斷的模仿，歸納和總結收穫良多。
css3動畫真的很重要
css3作為新一代的層疊樣式表技術，它新增的動畫功能使web前端開發人員的眼前一亮，同時伴隨著v8瀏覽器引擎的投入使用（使用的一些演算法，使開發人員的js被解析的更快，更好），讓我們前端攻城獅趕腳，前端開發又迎來了新的春天，spa(單頁面應用)的應用和一些快速開發單頁面應用的框架的出現，更是推動了前端開發的進步。尤其是vue.js和angualr.js應用讓人大呼過癮。
閒話少說，我們今天就談談有關css3動畫製作的transform，transition，animation的使用與三者之間的搭配使用。
首先，我們先來說一說transform，說到transform,先來張圖，這張圖包含了transform的所有屬性值，常用的有translate，scale，rotate，skew，還包括一個最近很多人嘗試使用的perspective。
補充：動畫的幀屬性@keyframes 它規定動畫。
css3動畫的相容性
animation：
Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要字首 -webkit-。
註釋：Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。
transform2D：
Internet Explorer 10、Firefox 以及 Opera 支援 transform 屬性。
Chrome 和 Safari 需要字首 -webkit-。
註釋：Internet Explorer 9 需要字首 -ms-。
transform3D：
Internet Explorer 10 和 Firefox 支援 3D 轉換。
Chrome 和 Safari 需要字首 -webkit-。
Opera 仍然不支援 3D 轉換（它只支援 [2D 轉換]
transition：
Internet Explorer 10、Firefox、Chrome 以及 Opera 支援 transition 屬性。
Safari 需要字首 -webkit-。
註釋：Internet Explorer 9 以及更早的版本，不支援 transition 屬性。
註釋：Chrome 25 以及更早的版本，需要字首 -webkit-。
tranform, transition, animation 的混合使用分為以下幾種情況：
1.transform的單獨使用，
2.transition的單獨使用，
3.animation的單獨使用，
4.transfrom和transition的混合使用，
5.transform和animation的混合使用，
5.transition和animation的混合使用（不能組合）複製程式碼對與第五種的使用情況來說，我的理解是不能混合使用，transition是宣告一個關鍵幀關鍵幀的動畫，它起到了潤滑油的作用；animation是呼叫關鍵幀的動畫。前者在css3動畫中起到一個潤管有的作用，後者就像flash動畫一樣，通過控制關鍵幀來動畫的每一步的執行。
transition和animation的相似之處
他們都隨著動畫的執行而改變元素的屬性
transition和animation的不同之處
1.transition動畫的執行過程就是宣告關鍵幀的過程，而animation動畫的事先宣告關鍵幀然後再呼叫關鍵幀
2.transition動畫的執行需要有事件來驅動，而animation動畫的執行不一定需要驅動，
結語
為了寫css3動畫系列的文章，我已經準備了很長的時間，一直在思考我應該怎麼寫，寫些什麼，還好總算有了一個結果，雖然有些地方詞不達意，或者未能表達清楚自己的想法，因此不足之處還請各位看官多多包涵能，後續文章和案例，我會在稍後幾個星期相繼推出，敬請期待！