如何使用 CSS3 Animation

前言

在這個浮誇的時代，如果網頁上沒有酷炫的功能或特效，似乎就遜掉了；如何讓網頁變得酷炫呢？其中一個方法就是使用 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-keyframe、fadeout-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 列表如下：

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

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 公主！