以前青島網(wǎng)站設(shè)計(jì)上的動(dòng)畫基本都是依靠flash制作完成，后來慢慢出現(xiàn)了javascript技術(shù)，讓動(dòng)畫的顯示效率顯著提高，隨著瀏覽器對(duì)CSS3動(dòng)畫的支持越來越好（IE除外，IE10用戶量還非常的少），CSS3動(dòng)畫應(yīng)用也將日趨廣泛，以前青島網(wǎng)站制作很多只能用flash或者javascript實(shí)現(xiàn)的動(dòng)畫效果，現(xiàn)在用CSS3動(dòng)畫也能部分的實(shí)現(xiàn)了。作為一個(gè)前端設(shè)計(jì)師，我們有足夠的理由去使用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)。

“神看光是好的、就把光暗分開了。”

資料整合后經(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)用集成庫(kù)輸出合適自己需要的CSS3動(dòng)畫代碼，來滿足另一部份不僅僅停留于查閱資料的訴求。

“神說、要有光、就有了光。”

大伙抬起頭，露出詭異的笑容表示認(rèn)同，并表示是應(yīng)該有這么個(gè)利器來幫助人類工業(yè)復(fù)興。于是他挽起褲管，提起腳丫夾起那雙人字拖一腳踩在轉(zhuǎn)椅上，N++分鐘后，框架出來了。然來大伙坐下來討論、需求分析、分工、輸出計(jì)劃deadline，經(jīng)過團(tuán)隊(duì)全員業(yè)余長(zhǎng)時(shí)間參與資料的整理、驗(yàn)證與校對(duì)，良好的閱讀版面設(shè)計(jì)，資料手冊(cè)有了一個(gè)比較完整的原型。

“神說、天上要有光體、可以分晝夜、作記號(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)畫庫(kù)”，右側(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)鍵幀。

“地是空虛混沌，淵面黑暗，神的靈運(yùn)行在水面上。”

ecd的小灰灰看著大伙桌面上堆積成山的各種資料，喃喃地說，做個(gè)網(wǎng)站吧，把我們用過的這些屬性整合起來，方便我們自己查閱，如果可以，也分享出來，方便廣大勞動(dòng)人民。

“并要發(fā)光在天空、普照在地上。事就這樣成了。”

所有的功能特性都集合完畢，最后到整妝階段，得有皮，是的，萬物生長(zhǎng)靠太陽，再牛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)證，爭(zhēng)取呈現(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留言。

“神稱光為晝、稱暗為夜．有晚上、有早晨、這是頭一日。”

經(jīng)過內(nèi)部多天的體驗(yàn)使用發(fā)現(xiàn)，有了資料手冊(cè)和工具，不能沒有成品的品鑒，應(yīng)該全民參與提交的一個(gè)案例集合，世間有取有予，才最和諧。網(wǎng)站第三塊內(nèi)容“案例分享”也就出現(xiàn)了。