動畫早就不是早期人們印象中的低齡向玩物了，從早年的盧卡斯影業到今天的工業光魔，動畫技術證明了它可以實現無限的可能性；從70年代的高達、EVA到之後的宮崎駿、皮克斯，動畫的深度和內涵也早已不弱於電影和文學作品。而隨著技術的積累，網頁中的動畫也已經是遍地開花，它時尚，有趣，也人性化。不斷湧現的新技術和新工具令網頁動畫設計的門檻逐年降低，高速網路也使得漂亮的動效和純萌的GIF幾乎是無縫地載入到網頁中。今天，我們可以斬釘截鐵地說，動畫已經是最常見也是最實用的網頁設計工具之一了。
基礎知識
將靜止或者二維平面上的物體賦予生機與活力，讓它們以符合或者貼近物理定律的方式來運動，這就是我們所熟知的動畫。Mac 桌面上那個著名的圖示跳動動畫就是最典型的例子之一，那種模擬皮球在地上彈跳的效果顯得真實而有質感，這種動畫設計是遵循著名的動畫設計12原則的。
對動效或者說動畫最熟悉的`，無疑是迪士尼。Frank Thomas 的《生命的錯覺：迪士尼動畫》中，就詳細總結了創造今天動畫的12個原則：
擠壓和拉伸
預期
登臺
連續動作和姿態對應
緩進緩出
弧形運動
次要動作
時序
誇張
立體刻畫
吸引力
(文末相關連結中，會附上關於這12原則的相關文獻。)
網頁動畫的實現方式很多，最常見的是使用Gif圖，CSS，SVG，WebGL以及視訊。但是和動漫不同，網頁中的動畫可以是任何元素，小到下劃線，大到背景和整個頁面，它可以隨著頁面載入而出現，也可能是滑鼠移動到某個位置上之後被觸發。和其他的設計手法相似，動畫可以是非常微妙、觸動人心的，也可以是開門見山、清晰直觀的。所以，最重要的是看你怎麼運用動效，是在合適的時候給人會心一擊，還是擺在顯眼的位置，令人不會錯過。
新興的趨勢
當我們談及網頁動效的時候，它和動漫、CG、電影、遊戲中的動畫，是截然不同的。當我們在網頁的語境之下提及動畫和動效的時候，它作為一個典型的設計趨勢和設計手法，節制是是最關鍵的因素。小巧簡單的動效在網頁中會更具吸引力，也更加有趣，那些真正“隱形”的動效會讓使用者難以察覺，卻更好地讓他們有更好的體驗。但是顯著而抓人眼球的複雜動效也很重要，它們會強化設計感。不過在動畫和動效的設計上，一致性很重要，過於複雜的規劃可能會讓整體效果混亂。
讓動畫成為設計趨勢，其實是整個設計圈的走向造成的。扁平化和極簡風的流行開來，網頁設計確實簡約了很多，但是使用者需要更多的資訊來告訴他們應該怎麼做，而動畫就是最好的方案——無需影響整體美感就可以給使用者以足夠的引導。即使是最簡單的設計，動畫的存在都能給予使用者以說明和指引，這樣前提下誕生的動效，在簡單和易用性之間達成了平衡。
動畫其實在後端和使用者端和有很多不錯的影響。首先是大家再也不需要用Flash來事先複雜的動畫了，它的實現方式也相當的自由和多樣，今天的動畫不會像曾經的Flash等技術那樣拖慢網站的呈現速度甚至影響伺服器，載入速度飛快，體驗優異。
大小動畫的對抗
大和小的競爭無處不在，即使是動畫的領域也同樣是如此。
規模較大的動畫常常是以視訊的形式存在的，它們通常會佔滿整屏或者一個比較關鍵的部位，迴圈、簡練是它們的特色。這些動畫為整個設計創造了焦點，使用者即使沒有執行任何操作，也能看到它們。以Studio Meta的網站為例，當你閱讀文案的時候，沒一張大圖都會逐步縮放。
小動效會出現在網站的各個角落，當你同網站進行互動的時候，會發現它們的存在。這些動效可能會在游標懸停的時候觸發，可能是一個指引性的標識，也可能以更加微妙的方式呈現。這些微小的動效會對整體的美感產生影響，在 Henry Brown的這個案例中，動畫就非常的小而微妙，仔細觀察，你會發現人物的眼睛在閃爍。
大和小的競爭無處不在，即使是動畫的領域也同樣是如此。
規模較大的動畫常常是以視訊的形式存在的，它們通常會佔滿整屏或者一個比較關鍵的部位，迴圈、簡練是它們的特色。這些動畫為整個設計創造了焦點，使用者即使沒有執行任何操作，也能看到它們。以Studio Meta的網站為例，當你閱讀文案的時候，沒一張大圖都會逐步縮放。
小動效會出現在網站的各個角落，當你同網站進行互動的時候，會發現它們的存在。這些動效可能會在游標懸停的時候觸發，可能是一個指引性的標識，也可能以更加微妙的方式呈現。這些微小的動效會對整體的美感產生影響，在 Henry Brown的這個案例中，動畫就非常的小而微妙，仔細觀察，你會發現人物的眼睛在閃爍。
