前言

在這個浮誇的時代,如果網頁上沒有酷炫的功能或特效,似乎就遜掉了;如何讓網頁變得酷炫呢?其中一個方法就是使用 CSS3 Animation!只要使用了 CSS3 Animation 就可以讓網頁中的元素動起來,立馬讓你的網頁酷炫度超越世界上 80% 的網頁!

而我個人身為一個全端工程師,稍微研究一下 CSS3 Animation 也是合理的,而且只要會一點點就可以拿來唬唬人,何樂而不為?很可惜這個技能就是唬不了正妹,哎,誰叫正妹只喜歡魔術呢~

不過請特別注意 CSS3 的 Animation 與 Transition 並不相同喔!雖然都可以做到相似的效果,有時看起來也真的很像,但實際上 Animation 與 Transition 依操作的程度不同所以適合使用的地方也會有所不同,或許我之後會再寫一篇文章介紹 Transition。(吧?)

就讓我們一起來看看 CSS3 Animation 大法怎麼練吧!

CSS3 Animation 第一級

假設我們要在一個 div 元素上加上動畫特效:

Step 1:定義要使用哪個關鍵影格(keyframe)來執行動畫

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: animation-keyframe-name 5s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation: animation-keyframe-name 5s;
    animation-iteration-count: infinite;
}

這段 CSS 語法就是代表 div 元素要用哪個關鍵影格來執行動畫,詳細的動畫動作都會寫在關鍵影格裡面,在這邊的意思就是要使用一個名稱叫 animation-keyframe-name 的關鍵影格來進行動畫,後面的 5s 就代表這個動畫執行的時間會是 5 秒鐘。而 animation-iteration-count: infinite 則代表這個關鍵影格動畫會不斷重複執行。

特別注意有 -webkit- 這個前綴的 CSS 語法是為了支援 webkit 核心的瀏覽器,例如:Chrome、Safari、Opera 等等。

所以這段語法翻譯成白話文就是:div 這個元素要使用一個叫做 animation-keyframe-name 的關鍵影格來進行動畫,動畫執行的時間長度為 5 秒鐘,且動畫會不斷重複執行。

keyframe 的名稱如果不想要叫 animation-keyframe-name,也可以改成其他的,比如:fadein-keyframefadeout-keyframe 等等。

Step 2:定義關鍵影格(keyframe)中動畫如何變化

/* Chrome, Safari, Opera */
@-webkit-keyframes animation-keyframe-name {
    from {background: red;}
    to {background: yellow;}
}

/* Standard syntax */
@keyframes animation-keyframe-name {
    from {background: red;}
    to {background: yellow;}
}

這段 CSS 語法就定義了 animation-keyframe-name 這個關鍵影格的動畫變化,它會在 5 秒之內從原本背景色紅色(from {background: red;})變為背景色黃色(to {background: yellow;}),就這樣我們就可以寫好 CSS3 動畫了,超簡單 der!

CSS3 Animation 第一級展示

CSS3 Animation 第二級

CSS3 Animation 第一級只有 from to 這兩種狀態可以指定動畫的變化,總感覺缺少了點什麼,如果好死不死動畫想要指定三種狀態變化怎麼辦?這時就要使用 CSS3 Animation 第二級了!在 CSS3 Animation 第二級我們可以使用動畫執行時間百分比來指定動畫變化的狀態。

/* Chrome, Safari, Opera */
@-webkit-keyframes animation-keyframe-name {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes animation-keyframe-name {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

這段 CSS 語法將動畫的變化分成五個狀態,在動畫執行時間 0% 的時候是背景紅色的狀態(0% {background: red;}),在動畫執行時間 25% 的時候是背景黃色的狀態(25% {background: yellow;}),在動畫執行時間 50% 的時候是背景藍色的狀態(50% {background: blue;}),在動畫執行時間 75% 的時候是背景綠色的狀態(75% {background: green;}),在動畫執行時間 100% 的時候是背景變回紅色的狀態(100% {background: red;}),在我們這個例子裡動畫執行時間 100% 也就是動畫執行時間在第五秒的時候。如此我們就可以做更多細緻的動畫了。

CSS3 Animation 第二級展示

CSS3 Animation 第三級

在 CSS3 Animation 第三級我們可以使用更多屬性(property)來讓動畫有更多調整的空間,這些 animation 相關的 property 列表如下:

CSS 屬性 說明
animation-delay 設定元素在被載入之後到開始執行動畫之間的延遲時間
animation-direction 設定元素在動畫執行完之後,是否要以相反方向的方式播放,或是從頭開始以原來的方向重複播放。
animation-duration 設定整個動畫執行一次的時間長度
animation-iteration-count 設定動畫執行的次數,若要不斷重複執行,則可設為 infinite
animation-play-state 可用來暫停或繼續動畫播放
animation-fill-mode 設定元素在動畫執行前後如何套用 CSS 的樣式
animation-timing-function 設定動畫執行的時間函數

我們將所有動畫相關的屬性都使用看看:

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: animation-keyframe-name;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: animation-keyframe-name;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

CSS3 Animation 第三級展示

感覺越來越強了!

CSS3 Animation 第四級

在 CSS3 Animation 第三級我們學會使用更多動畫相關屬性了,但 CSS 的語法卻變得很冗長,這時就要使出 CSS3 Animation 第四級,這樣就可以寫出更精簡的 CSS3 Animation 語法了!

上面例子的:

animation-name: animation-keyframe-name;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

可以改寫成:

animation: animation-keyframe-name 5s linear 2s infinite alternate;

所以就會變成:

div {
    -webkit-animation: animation-keyframe-name 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: animation-keyframe-name 5s linear 2s infinite alternate; /* Standard syntax */
}

CSS3 Animation 大法大功告成!

CSS3 Animation 第四級展示

結語

我們已經練完了 CSS3 Animation 大法的前四級,其實只要學會這些技巧,大概就能做出不錯的特效,只是動畫如何安排才會吸引人就要看個人的 Sense 了,像我就沒有什麼 Sense~

或許可以去請教對動畫最有 Sense 的 Rice Tseng 公主!