學(xué)習(xí)css3動畫
css3動畫這個對于我們前端攻城獅來說是個既熟悉又陌生的東東糊秆，前兩年有好些個大牛都在研究使用它武福，但最近一段熱度降了下來，可以說這個東東各大鐘情于大的公司都有自己的一套解決使用方案痘番，但我在網(wǎng)上苦苦的尋找捉片，沒有發(fā)現(xiàn)平痰，可能是我不夠用心。
但我今天想說的是如何制作自己的一套css3動畫制作方案伍纫，可能是很多前端工程師夢寐以求的宗雇，我也不例外。做一套適合自己的行之有效的解決方案說前來容易莹规，但真正的做起來發(fā)現(xiàn)還是有一定的難度的赔蒲。
我們前端攻城獅的進(jìn)階之路一般是使用—>熟練使用—>模仿—>總結(jié)—>歸納。這是一個由淺入深的過程良漱。
作為一個有一兩年開發(fā)經(jīng)驗的web前端工程師來說舞虱，下一步的進(jìn)階之路（升職，加薪母市，迎娶白富美……）就是分析一些成熟的css3動畫框架矾兜，在這之前你可能自己寫了一些，或者模仿了一些案例患久，但我想這還不足以讓你自己寫一份適合自己的解決方案椅寺，你需要要更系統(tǒng)的研究一下（天賦異秉著不在此列）。我分析的框架有aimate.css, 易企秀（H5場景）墙杯，fulpage.js框架配并，同時我也模仿layui，小米官網(wǎng)高镐，iconfont等一些網(wǎng)站的動畫效果溉旋，通過不斷的模仿，歸納和總結(jié)收獲良多嫉髓。
css3動畫真的很重要
css3作為新一代的層疊樣式表技術(shù)观腊，它新增的動畫功能使web前端開發(fā)人員的眼前一亮，同時伴隨著v8瀏覽器引擎的投入使用（使用的一些算法算行，使開發(fā)人員的js被解析的更快梧油，更好），讓我們前端攻城獅趕腳州邢，前端開發(fā)又迎來了新的春天儡陨，spa(單頁面應(yīng)用)的應(yīng)用和一些快速開發(fā)單頁面應(yīng)用的框架的出現(xiàn)，更是推動了前端開發(fā)的進(jìn)步量淌。尤其是vue.js和angualr.js應(yīng)用讓人大呼過癮骗村。
閑話少說，我們今天就談?wù)動嘘P(guān)css3動畫制作的transform呀枢，transition胚股，animation的使用與三者之間的搭配使用。
首先裙秋，我們先來說一說transform琅拌，說到transform,先來張圖缨伊，這張圖包含了transform的所有屬性值，常用的有translate进宝，scale刻坊，rotate，skew党晋，還包括一個最近很多人嘗試使用的perspective紧唱。
補充：動畫的幀屬性@keyframes 它規(guī)定動畫。
css3動畫的兼容性
animation：
Internet Explorer 10隶校、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-蛹锰。
注釋：Internet Explorer 9深胳，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性铜犬。
transform2D：
Internet Explorer 10舞终、Firefox 以及 Opera 支持 transform 屬性。
Chrome 和 Safari 需要前綴 -webkit-癣猾。
注釋：Internet Explorer 9 需要前綴 -ms-敛劝。
transform3D：
Internet Explorer 10 和 Firefox 支持 3D 轉(zhuǎn)換。
Chrome 和 Safari 需要前綴 -webkit-纷宇。
Opera 仍然不支持 3D 轉(zhuǎn)換（它只支持 [2D 轉(zhuǎn)換]
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是聲明一個關(guān)鍵幀關(guān)鍵幀的動畫砖茸，它起到了潤滑油的作用；animation是調(diào)用關(guān)鍵幀的動畫殴穴。前者在css3動畫中起到一個潤管有的作用凉夯，后者就像flash動畫一樣货葬，通過控制關(guān)鍵幀來動畫的每一步的運行。
transition和animation的相似之處
他們都隨著動畫的執(zhí)行而改變元素的屬性
transition和animation的不同之處
1.transition動畫的執(zhí)行過程就是聲明關(guān)鍵幀的過程劲够，而animation動畫的事先聲明關(guān)鍵幀然后再調(diào)用關(guān)鍵幀
2.transition動畫的執(zhí)行需要有事件來驅(qū)動震桶，而animation動畫的執(zhí)行不一定需要驅(qū)動，
結(jié)語
為了寫css3動畫系列的文章征绎，我已經(jīng)準(zhǔn)備了很長的時間蹲姐，一直在思考我應(yīng)該怎么寫，寫些什么人柿，還好總算有了一個結(jié)果柴墩，雖然有些地方詞不達(dá)意，或者未能表達(dá)清楚自己的想法凫岖，因此不足之處還請各位看官多多包涵能江咳，后續(xù)文章和案例，我會在稍后幾個星期相繼推出哥放，敬請期待歼指！
