今天 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