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