/ 寫在最前
隨著瀏覽器對(duì)CSS3動(dòng)畫的支持越來越好（IE除外，IE10用戶量還非常的少），以前很多只能用flash或者javascript實(shí)現(xiàn)的動(dòng)畫效果，現(xiàn)在用CSS3動(dòng)畫也能部分的實(shí)現(xiàn)了。作為一個(gè)前端攻城獅，我們有足夠的理由去使用CSS3動(dòng)畫讓用戶有更好的體驗(yàn)。
在使用CSS3動(dòng)畫設(shè)計(jì)構(gòu)思前，我們須改變所有的瀏覽器都保持一致的思想，在不支持CSS3動(dòng)畫的主流瀏覽器里面保持最基本的功能體驗(yàn)，讓支持CSS3動(dòng)畫的瀏覽器給用戶提供更優(yōu)的用戶體驗(yàn)。
QQ音樂上周發(fā)布的QQ音樂年末回饋，全民領(lǐng)福袋的
活動(dòng)需求中，有習(xí)慣使用chrome等非IE瀏覽器的同學(xué)會(huì)發(fā)現(xiàn)一些好玩的效果，像《逆世界》電影一樣，福袋里的禮品像失重般飛出來，貼在頂上，這是
ecd同學(xué)利用CSS3動(dòng)畫設(shè)計(jì)的小創(chuàng)意。類似的效果，在很多的項(xiàng)目中都會(huì)出現(xiàn)，相信以后也會(huì)越來越多。更多的項(xiàng)目初試水如：
http://y.qq.com/vip/promote_yearvip/
http://y.qq.com/vip/levelUp/
/ 寫在前
“起初，神創(chuàng)造天地。”
CSS3的出現(xiàn)已讓web從業(yè)者興奮了好久，但因兼容性的關(guān)系，應(yīng)用面相對(duì)較窄，當(dāng)然，也有不少的項(xiàng)目都有它的滲入，特別是在mac及移動(dòng)終端領(lǐng)域。
好幾個(gè)月前，我們?cè)谝粋�(gè)偉大項(xiàng)目中大肆使用CSS3及其更深入的動(dòng)畫屬性，來替代古老年代需要JS來完成的選擇和效果，給用戶更沖“雞”、更舒心的體驗(yàn)。
“地是空虛混沌，淵面黑暗，神的靈運(yùn)行在水面上。”
ecd的小灰灰看著大伙桌面上堆積成山的各種資料，喃喃地說，做個(gè)網(wǎng)站吧，把我們用過的這些屬性整合起來，方便我們自己查閱，如果可以，也分享出來，方便廣大勞動(dòng)人民。
“神說、要有光、就有了光。”
大伙抬起頭，露出詭異的笑容表示認(rèn)同，并表示是應(yīng)該有這么個(gè)利器來幫助人類工業(yè)復(fù)興。于是他挽起褲管，提起腳丫夾起那雙人字拖一腳踩在轉(zhuǎn)椅 上，N++分鐘后，框架出來了。然來大伙坐下來討論、需求分析、分工、輸出計(jì)劃deadline，經(jīng)過團(tuán)隊(duì)全員業(yè)余長時(shí)間參與資料的整理、驗(yàn)證與校對(duì)，良 好的閱讀版面設(shè)計(jì)，資料手冊(cè)有了一個(gè)比較完整的原型。
“神看光是好的、就把光暗分開了。”
資料整合后經(jīng)過體驗(yàn)發(fā)現(xiàn)，資料整理成的手冊(cè)混入過多的DEMO不合適，這些動(dòng)畫屬性參數(shù)DEMO應(yīng)有個(gè)地方來存放，讓資料查閱和動(dòng)畫屬性參數(shù) DEMO都有各自的窩。同時(shí)，過多的“算法”和數(shù)學(xué)及校式屬性的組合使用，會(huì)讓很多人抓狂。于是增加了一個(gè)工具，可以在線設(shè)計(jì)動(dòng)畫、調(diào)試預(yù)覽或調(diào)用集成庫 輸出合適自己需要的CSS3動(dòng)畫代碼，來滿足另一部份不僅僅停留于查閱資料的訴求。
“神說、天上要有光體、可以分晝夜、作記號(hào)、定節(jié)令、日子、年歲。”
經(jīng)過對(duì)目標(biāo)用戶的使用習(xí)慣與訴求采樣分析，動(dòng)畫工具經(jīng)過多次討論后確認(rèn)采用左右結(jié)構(gòu)，左側(cè)是三個(gè)TAB切換，可設(shè)計(jì)“變形過渡”、“自定義動(dòng)畫”與“預(yù)設(shè)動(dòng)畫庫”，右側(cè)是效果預(yù)覽區(qū)，方便即時(shí)檢驗(yàn)動(dòng)畫的預(yù)期。
設(shè)計(jì)面板提供三種模式的混合：設(shè)置條拖動(dòng)智能調(diào)整大概數(shù)值，手工輸入數(shù)值精確調(diào)整，預(yù)設(shè)效果與貝塞爾曲線混合，更多的操作發(fā)現(xiàn)可在體驗(yàn)中獲得。
右側(cè)預(yù)覽區(qū)域，可把本機(jī)圖片拖動(dòng)到區(qū)域內(nèi)替換默認(rèn)圖片，以獲得更接近的動(dòng)畫效果。
在“自定義動(dòng)畫”設(shè)置時(shí)，右側(cè)下面還提供一個(gè)時(shí)間軸動(dòng)畫層集合的調(diào)試區(qū)域（如上圖），可在關(guān)鍵幀設(shè)置其時(shí)間位置與數(shù)值，或刪除關(guān)鍵幀。
“神稱光為晝、稱暗為夜．有晚上、有早晨、這是頭一日。”
經(jīng)過內(nèi)部多天的體驗(yàn)使用發(fā)現(xiàn)，有了資料手冊(cè)和工具，不能沒有成品的品鑒，應(yīng)該全民參與提交的一個(gè)案例集合，世間有取有予，才最和諧。網(wǎng)站第三塊內(nèi)容“案例分享”也就出現(xiàn)了。
“并要發(fā)光在天空、普照在地上。事就這樣成了。”
所有的功能特性都集合完畢，最后到整妝階段，得有皮，是的，萬物生長靠太陽，再牛X的東東也需要包裝。
達(dá)人同學(xué)經(jīng)過一周末的操刀畫皮，并為此設(shè)計(jì)了一個(gè)野蜂飛舞的LOGO，大伙堆在一起整合優(yōu)化，體驗(yàn)并修改細(xì)節(jié)和BUG，經(jīng)過多個(gè)日夜的奮斗。
就這么成了，就這么成了。
「CSS3動(dòng)畫參考」名字暫定，如您有更性感的名字，請(qǐng)告知我們。由 ecd 數(shù)字音樂設(shè)計(jì)中心 利用業(yè)余時(shí)間整理/設(shè)計(jì)/研發(fā)輸出，并在實(shí)際工作中得到驗(yàn)證，爭取呈現(xiàn)的是一份詳細(xì)嚴(yán)謹(jǐn)?shù)馁Y料。
感謝ecd本項(xiàng)目團(tuán)隊(duì)huihui、darren、mousa、williams、bryan、hugo、rock、pufen傾情辛苦奉獻(xiàn)和廣大業(yè)界知識(shí)份子的支持與鞭策，“神的光要照著我們！”
該工具使用HTMl5 & CSSS3設(shè)計(jì)開發(fā)，我們十分建議您使用Chrome、Safari、Firefox等瀏覽器進(jìn)行訪問使用。
在使用過程中有疑問或錯(cuò)誤糾正，請(qǐng)?jiān)诒举N留言。
/ 再寫一點(diǎn)
1.「案例分享」里的網(wǎng)站來源于網(wǎng)友提交并審核通過，我們采用外鏈的方式集合，版權(quán)歸原作者所有。如果出現(xiàn)類似404或503的馬賽克，與我們無關(guān)；
2.「動(dòng)畫手冊(cè)」的資料來自于互聯(lián)網(wǎng)，經(jīng)團(tuán)隊(duì)翻譯、整理、糾正、驗(yàn)證，修訂成冊(cè)，如遇資料有誤或信息過舊，請(qǐng)知會(huì)我們，我們會(huì)盡快更新；
3.「動(dòng)畫工具」的動(dòng)畫庫來源于Animate.css；
4.本站為自主研發(fā)，免費(fèi)使用，未經(jīng)我們授權(quán)許可不得擅自進(jìn)行篡改轉(zhuǎn)載、反編譯。如遇雷同，不屬巧合，我們保留合法追究之權(quán)利；
5.如使用IE瀏覽器訪問不正常，本團(tuán)隊(duì)均不予解釋并不承擔(dān)任何責(zé)任；
6.在使用過程中如出現(xiàn)抽咽、流鼻涕、眼眶濕潤，屬正常現(xiàn)象；如出現(xiàn)頭痛，呼吸困難、心悸、肩周刺痛，請(qǐng)及時(shí)下班或參加戶外運(yùn)動(dòng)；如癥狀加深不遵醫(yī)囑造成的傷害均與我們無關(guān)，但我們會(huì)酌情前往探望。
/ 關(guān)于使用
「案例分享」集合了諸多CSS3動(dòng)畫相關(guān)但不僅限于CSS3動(dòng)畫的項(xiàng)目案例，均來自網(wǎng)友提供，可以在這里查閱相關(guān)DEMO或查找靈感，點(diǎn)擊跳轉(zhuǎn)至原目標(biāo)站點(diǎn)。如果您有更好的URL，懇請(qǐng)?zhí)峤弧?
「動(dòng)畫手冊(cè)」保持以往的查閱習(xí)慣，保留語法、說明、屬性取值、實(shí)例和兼容性說明，希望在實(shí)踐中能便捷。
「動(dòng)畫工具」在手冊(cè)資料的基礎(chǔ)上，加上智能的在線調(diào)試、演示預(yù)覽、導(dǎo)出代碼等功能。目前包括“變形與過渡”、“自定義動(dòng)畫”與“動(dòng)畫庫預(yù)設(shè)”。
“自定義動(dòng)畫”提供多個(gè)層與幀的設(shè)想，同時(shí)調(diào)試與設(shè)計(jì)。
/ 最后
過多的文字介紹都是蒼白的，能把文字認(rèn)真看完都是無聊的，看完不去試用并收藏都是耍流氓的，收藏完不去分享給同行都是自私的。
我們的承諾： 天惠公司將一如既往，秉承專業(yè)服務(wù)精神，一切從客戶利益出發(fā)，為您率先建站,令您把握先機(jī)，長遠(yuǎn)的眼光定使您在商海搏擊中穩(wěn)操勝券。