原文：
作為一名前端，在拿到設計稿時你有兩種選擇：
1.快速輸出靜態頁面
2.加上高階大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來
作為乙個有志向的前端，當然是選2啦！可是需求時間又很短很短，怎麼辦呢？
這次就來談談一些動畫設計的小技巧，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。
同時也會談及移動端h5頁面的優化細節與關鍵點，因此本文章將分為動效篇和優化篇。
====前方高能====
（1） css3時序錯開漸顯動畫
這是一種比較常用的動畫，它的優點是節奏感強，做法就是先讓每個元素隱藏，然後當頁面呈現後每個元素錯開時間出現。
例子（忽略相容字首和無關屬性）：
效果就是兩個元素分別從上面掉下來，這裡有個小細節（keyframes），為了讓掉下來的動畫生動點，應該是在90%的時候先掉下一點點，然後瞬間在100%時回跳5px。
還有個細節，安卓2.3.*不能良好支援-webkit-animation-fill-mode，也就是漸變動畫不能停止在最後一幀。有這樣乙個解決方案：
1.用modernizr去檢測是否支援這個屬性，加上識別類.no-animation-fill-mode；
2.根據識別類採取以下措施：
（1）用js模擬同樣效果；
（2）用css遮蔽掉動畫；
（3）或者直接全部都用transition來做（不要keyframes）。
示例頁面如下
2） css3細節強調動畫
一些區域性細節如果還是漸現顯示，會枯燥沒什麼感覺，例如標題、按鈕等，需要一種強調。
分兩種情況：
1.如果時間允許的話，基本做法是先把乙個元素切成不同的塊狀，例如小人的手腳都切成不同，然後讓它們重新組合，再通過賦予不同的css動畫來讓它生動起來，這裡引用個webank的例子：
2.如果時間緊湊，又不像桑尼一樣擅長於動畫細節，可以使用一些輔助工具：
（3）svg動畫
svg技術越來越不陌生，使用門檻也漸漸降低，而且svg動畫還可以使用css控制。
先看個生日頁面，是個svg的蛋糕：
可見svg是很強大的！彌補了css3的不足。
然而這種動畫也是略耗時，但有一種比較常用的，就是線條的描繪動畫，css3比較難實現，這裡可以用svg，看圖：
介紹乙個ps外掛程式svgartisan（目前還未有主頁），這個工具可以直接根據psd的路徑圖層生成svg圖形。
接下來就簡單了，將設計稿上的路徑圖形用外掛程式生成對應的svg，例如是這樣的：
（注意，其中的foreignobject標籤內是不支援svg的瀏覽器會看到一張.m3-svg-nosupport標籤下的。）
再使用css3的animation控制stroke-dashoffset：
效果不難吧！svg還有各種用途，例如製作iconfont等，可以深入挖掘。
（4） 重力陀螺儀
想讓頁面更有層次感，不妨讓設計提供一些碎片元素，例如彩花，星星之類，然後把它們單獨切出來放畫面前景，使用陀螺儀伴隨著手機運動碎片也跟著運動，多麼好玩！
這裡提供乙個工具可以輕鬆實現陀螺儀重力效果的：parallax.js
用法簡單，定義乙個parallax-obj的父類，把需要動的元素加上layer的類，然後設定動的範圍data-depth：
（5） 背景**&音效
h5頁面要炫酷，畫面生動還是不夠的，一定要配合生動的**。因此可以主動跟設計或產品溝通，讓他們可以提供**資源，分分鐘導致uv猛漲有木有！
當然，有了**，前端也不是直接引用的，還是有點要求：
2.**體積要小，音質和流量，在手機上還是優先考慮流量吧。
一般背景**體積可以接受的範圍是200k以下，若太大，可以使用格式工廠等軟體，降低它的位元率和聲道來改變體積。
接著，只需要簡單引用：
因此，記得暴露乙個**關閉/開啟的按鈕，不然肯定被使用者罵死。
（6）有趣的loading
loading頁還是要有的，萬一使用者網速慢呢？
以上做了那麼多事，如果沒有資源載入都是玩不來的，因此還需要乙個loading的支援。一般情況下頁面體積大於3m則要加上loading頁。
然而loading還是可以做得很有趣的，一般的做法是：
2.引入有趣動畫，放乙個賤賤的人物跳舞給你看；
3.一切從簡，用css3簡單動畫。
====最後總結====
最後，給乙個例子結尾吧。
（由於活動已結束，很多運營處都被刪掉從簡了，忽略那些細節）
當然，真正要做到高效製作動態h5頁面，還是靠積累，因此平時做好的細節動畫自己都積累起來，下次分分鐘就能用得上。
html5移動開發
canvas 3d 3d的繪圖功能支援 svg 向量圖支援 設計師要知道，的移動 旋轉 縮放?那都太基礎了，自己畫都是小case，至於怎麼用，好好想想吧 5.專為移動平台定製的表單元素 瀏覽器中出現的html5表單元素與對應的鍵盤 型別用途鍵盤 可以綜合使用gps wifi 手機等方式讓定位更為精準...
Html5標籤頁面
新增加的html5標籤 html5 新增加的html5標籤 定義 article 定義頁面內容之外的內容。定義聲音內容。定義影象。定義命名按鈕 定義數列 tree list 中的資料 定義下拉列表。定義外部互動內容或外掛程式 定義section或page的頁尾。html5 ios中忽略將數字變為 號...
HTML5基礎篇之HTML
本文章純屬個人學習之後總結的一些小經驗，望大神指導指導 一 html基本結構 注 html大小寫都可以 但是不要出現這種的 html 要麼全都大寫 要麼全都小寫 所有的標點符號都必須是英文狀態下的！切記！doctype 宣告文件型別 千萬不可以忘記 meta charset utf 8 防止出現亂碼...