transform，transition，animation的混合使用——初探

學習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。

tranform屬性

animation屬性

補充：動畫的幀屬性@keyframes 它規定動畫。

過渡屬性

css3動畫的兼容性

animation：
Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 須要前綴 -webkit-。
註釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

transform2D：
Internet Explorer 十、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 十、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動畫系列的文章，我已經準備了很長的時間，一直在思考我應該怎麼寫，寫些什麼，還好總算有了一個結果，雖然有些地方詞不達意，或者未能表達清楚本身的想法，所以不足之處還請各位看官多多包涵能，後續文章和案例，我會在稍後幾個星期相繼推出，敬請期待！