今天 Allen 我想教大家如何在設計網頁時，透過簡單的 CSS 語法，來做到簡易的動畫效果，而且過程完全用不到 Java Script 語法….
這邊我們是直接使用 CSS Animation Level 1 所定義的 CSS 規則，而想學習更詳細的功能定義，可以花時間閱讀 http://www.w3.org/TR/css3-animations/ .. 這邊我只簡單列舉我們常會用到的屬性列表，列表如下：
在 animation 相關屬性的部份，可以使用的 CSS 屬性有：
CSS 屬性 說明
animation-delay 設定網頁元素在被載入之後到開始播放動畫之間的等待時間。
animation-direction 設定網頁元素在動畫播放完之後，是否要以相反方向的方式播放，或是從頭開始以原來的方向重複播放。
animation-duration 設定整個動畫播放一次的時間長度。
animation-iteration-count 設定動畫播放的次數，若要不斷重複播放，則可設為 infinite。
animation-name 設定 @keyframes at-rule 所使用的動畫名稱。
animation-play-state 這個屬性可用來暫停或繼續動畫播放。
animation-timing-function 透過加速曲線（acceleration curves），設定動畫播放的速度。
animation-fill-mode 設定動畫元素在播放前與播放後，如何套用 CSS 的樣式。
在開始實作 HTML CSS 動畫前，我們必須把握 3 個主要步驟，
1. 我們必須使用 @keyframes 來定義與建立我們所需要的動畫。
@keyframes 是讓我們用來定義與建立動畫的內容，換句話說就是用來指定動畫的畫格（frame）是如何轉變。
使用關鍵影格定義動畫流程
在你設定了動畫的時間資訊之後，你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 @keyframes )。關鍵影格描述了該元素在漸變過程中的外觀。
因為動畫漸變時間已經在 CSS style 中被定義，所以關鍵影格使用 percentage 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點，而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義，如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要，所以這兩個時間點有特殊的別名： from 和 to。
2.在 HTML 的 Style 設定好我們要套用的 css animations 屬性以及屬性值。
3.思考我們要實作的動畫，會需要影響那些 HTML 支援的屬性，例如 背景顏色 （background-color)、img元素的Url 圖片變更、某個HTML 元素位置轉移（top、left、position) 等等。
開始動手實作：
1.我們首先在 Head 的 <style> 裡宣告以下語法：
@keyframes moving {
from { background-position: 0% }
to { background-position: 100% }
}
/*這段語法，是宣告一個動畫名稱為 moving ，它將從背景圖位置 0% 到 100 %，就是從左到右移動。*/
2.宣告 <body> 的元素內容，如下語法：
body {
background-image : url(media/ironman.jpg);
background-repeat : no-repeat;
background-position: center center;
height: 500px;
animation: moving 30s linear infinite;
}
重點語法，我把它標示為藍色字體，第一行~第三行 分別只是簡單的設定，背景圖為那個位置，這邊是存放在 media/ironman.jpg，最重要的動畫語法為 animation: moving 30s linear infinite;
就是設定在 body 元素裡，我們要套用 CSS 動畫，而 moving 就是我們步驟 1 @keyframes moving 設定的動畫名稱。
完成上述很簡單的語法，我們連 Java Script 程式碼，一行都沒寫，就可以完成簡易動畫了，執行結果如下圖
網智數位-軟體開發（軟件開發）
針對各特殊產業都可以量身定做符合貴公司的需求，別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口：allen@netqna.com
聯繫電話：0920-883-870
skype： netqna
line：netqna
微信：netqna
黃先生 Allen
網智數位-軟體開發 程式設計 系統分析 客製化軟體 