動畫

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

寫網頁時難免會有需要一些動畫效果，例如當滑鼠指標在按鈕、圖片、功能表上或離開時，或是希望做出具有專業水準個人檔案、新聞、產品卡時，如果是初學者想要從無到有，可能需要花費較長時間，要是可以參考別人已做出的效果，取得其程式碼再來修改成自己想要的效果，這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果，且每個都有效果展示，更提供 HTML、CSS、JQuery 完整的範例程式碼，用戶只需取得這些程式碼，稍加修改，就可以在自己網頁呈現，相當方便。

以前想要讓網頁有動畫效果，多數要靠 JaveScript、GIF 或是 Flash，而現在則可以透過 CSS 3，不過想要透過 CSS 3 語法來做動態特效，其學習門檻著實不低。但若只想在網頁放一些較為簡單的特效，可以來參考 CSS3 Animation 這個網站所提供的 CSS 3 動畫語法免費範本，下載後，只要經過簡單的語法加工，就能套用範本，讓自己的網頁輕鬆動起來。

CSS 是用來控制網頁的布局與樣式，對圖檔與動畫的支援都不多，因此，大家看到網頁所呈現的圓角、陰影、漸層、半透明...等特殊效果，幾乎都由圖片來完成，當然網頁載入的速度也就會慢一些，而 CSS3 除了 CSS 原有的屬性外，大幅增加對圖像與動畫的語法支援，以前要用圖片處理的圓角、漸層、陰影...等等，都可以靠 CSS3 來完成，另外，為增加網頁的可看與互動性，CSS3 的動畫屬性，也讓製作者減輕製作的成本，更讓觀看的用戶，免去瀏覽器安裝擴充程式所帶來的資安風險與惡意程式的假藉更新名義實則進行勒索攻擊等問題。CSS3 立意很好，但對初學者來說門檻很高，我們可以透過像 CSS Animate 這類的線上免費工具，加快我們的學習並製作出具水準的動畫。

易讀、易懂且又兼具美觀是數據在呈現時大家所追求的目標，不論是 Excel、Google 試算表裡面都有很多協助使用者將數據圖表化的工具，而 Data GIF Maker 這個網站則是將數據圖表製作成 GIF 圖檔，將數據的呈現採用動畫的方式來展現，適合用於數據項目不多的簡報圖表上，使用的方式很簡單，只要將數據的項目名稱及其值輸入，再搭配所選擇要使用的模板，輕鬆就可以完成，該服務免註冊即可使用。

想要在 Facebook 留言板上製造出文字特效，除了大家先前所熟知的 “xo”或“xoxo”或“xoxoxo”可以製造出「愛心」之外，另外也還有其他的單字/短語，可以幫助大家在留言時，製造出特殊的動畫效果，例如，輸入“you’re the best”或“有你真好”可產生「飛耀之星」，輸入“恭喜” 或“congratulations”可產生「慶典氣球」等等，還有一些有時效性的像是 bffs、rad、thank you so much 都已失效，需要注意的是，如果要在粉絲專業來使用，需切換到個人帳號，另外，手機亦可使用。

常在一些典禮上常看到將許多相片加上簡單的說明後，製作成可自動播放的投影片並搭配背景音樂來播放，若你也有這個需求時，可以來試試 DVD Slideshow GUI 這套可加入自動加入轉場效果、動畫、自訂每張圖播放時間及字體等等的免費工具軟體，製作好的影片可匯出影片。

想要建立GIF 動畫圖檔，通常需要準備較多類似的圖片，讓動畫看起來更逼真，不過若是只有一張圖片，也想來做動畫效果，可以來試試 Free Online Gif Effect 這個免費的線上服務，提供 26種的動畫效果，讓你輕鬆建立自己的動畫圖片。

想要將影片的部分或全部內容使用 GIF 動畫的方式來呈現，在以往可能需要使用像是使用 Free Video to JPG converter 影片連續擷取成圖片的工具 之類的軟體，先將影片內容擷取成圖片再利用像是 AnimateGif 快速建立 GIF 動畫軟體(免安裝)來製作，現在若有這個需求，可以安裝 Free Video to GIF Converter 這套可將影片內容全部或部分製作成 GIF 動畫的免費軟體，輕輕鬆鬆就可以將 AVI、WMV、MPEG、MOV、FLV、MP4、3GP、VOB...等的影片格式，按照自己的所設定的影片起始與結束時間、GIF 圖片的長、寬與每幾秒擷取的 Frames 數，製作成 GIF 動畫。

有時候我們會在網頁上看到類似影片播放的圖片，這種圖片的格式就是 Gif ，要製作 Gif 動畫有許多免費軟體可以配合，像是 AnimateGif 快速建立 GIF 動畫軟體(免安裝) 等，另外，若需要將影片的全部或片段製作成 Gif 動畫時，可以來試試 Freemore Video to GIF Converter 這套影片製作成 Gif 動畫，簡單好用。

想要在自己的網頁中來播放動畫或影片，方法很多，可以利用 Flash 來包裝也可以將影片轉成 GIF 動畫檔或是直接將影片上傳到影音服務網站像是 Youtube 後來取得嵌入網址再放到自己的網頁中。不過這樣的作法，隨著主流瀏覽器開始支援 HTML5 的普及後，想要將影片放到網頁中，也變得容易。以往若網頁有用 GIF檔，想要改用 HTML5 來節省頻寬，現在你就可以透過 gfycat.com 網站所提供的 GIF 動畫檔轉為 HTML5 影片的免費服務，輕鬆完成。