Animation

前言

好的前端工程師，會更注重使用者的體驗和互動。那麼動畫就是將我們的靜態頁面，變成具有靈動性，為我們的介面添加個性的一種方式。

下面是七喜的官方主頁，它就是很好的富互動樣例。滑鼠移動到導航欄，就會播放多種動效，給使用者一種酷炫的體驗。我覺得使用者體驗，才是前端工程師更加關注的問題，而不是一味追求Javascript的編碼技能。

動畫實踐

Animation 組成

CSS3 Animation 是由三部分組成。

1.關鍵幀(@keyframes)

• 關鍵幀(keyframes) - 定義動畫在不同階段的狀態。
• 動畫屬性(properties) - 決定動畫的播放時長，播放次數，以及用何種函式式去播放動畫等。（可以類比音視訊播放器）
• css屬性 - 就是css元素不同關鍵幀下的狀態。

下面我們來看一個例子。
建立了一個@keyframes命名為dropdown。

• 關鍵幀主要分為3個階段，0%、50%、100%。
• 動畫播放時長為6s、迴圈播放(infinite)、以linear方式進行播放。
• 修改的元素屬性為margin-top

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暫停效果 */
   10% { margin-top: 0px;
 
}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

需要注意！當屬性的個數不確定時：

當我們在定義不同關鍵幀，元素屬性的個數是一個變化的值。
如果一個關鍵幀的屬性，沒有出現在其他關鍵幀的時候，那麼這些屬性將會使用上一幀的預設值。
區別在於，預設之後的漸變效果是不會出現的。比如下面兩種寫法，

  @keyframes dropdown {
    0% { top: 0; }
    30% { top: 300px; }
    50%
 
 { top: 150px; }
    70% { top: 300px; }
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  }
  }

  @keyframes dropdown {
    0% { top: 0; left:0px;}
    30% { top: 300px; left:0px;}
    50% { top: 150px; left:0px;}
    70% { top: 300px; left:0px;}
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  left:0px;}
  }

語法

@keyframes keyframes-name {
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
幀列表的名稱。 名稱必須符合 CSS 語法中對識別符號的定義。
from
等效於 0%.
to
等效於 100%.

2.動畫屬性

動畫屬性可以理解為播放器的相關功能，一個最基本的播放器應該具有：播放/暫停、播放時長、播放順序(逆序/正序/交替播放)、迴圈次數等。
主要也分為兩大點：

• 指定播放的元素

• 定義播放資訊的配置
  

動畫原始碼

簡寫屬性形式:

animation:
[animation-name] [animation-duration] // 動畫的名稱、持續時間
[animation-timing-function][animation-delay] // 關於時間的函式(properties/t)、延遲時間
[animation-iteration-count] [animation-direction] // 播放次數、播放順序
[animation-fill-mode] [animation-play-state]; // 播放前或停止後設置相應樣式、控制動畫執行或暫停

1.時間函式（animation-timing-function）

animation-timing-function屬性定義了動畫的播放速度曲線。
可選配置引數為:
ease、
ease-in、
ease-out、
ease-in-out、
linear、
cubic-bezier(number, number, number, number)

動畫原始碼
預設值，如果沒有顯示寫呼叫的函式，則預設為ease。

2.動畫方向（animation-direction）

animation-direction屬性表示CSS動畫是否反向播放。
可選配置引數為:

single-animation-direction = normal | reverse | alternate | alternate-reverse

• animation-direction: normal 正序播放
• animation-direction: reverse 倒序播放
• animation-direction: alternate 交替播放
• animation-direction: alternate-reverse 反向交替播放
• animation-direction: normal, reverse
• animation-direction: alternate, reverse, normal

動畫原始碼
MDN文件

3.動畫延遲（animation-delay）

animation-delay屬性定義動畫是從何時開始播放，即動畫應用在元素上的到動畫開始的這段時間的長度。
預設值0s，表示動畫在該元素上後立即開始執行。
該值以秒(s)或者毫秒(ms)為單位。

4.動畫迭代次數（animation-iteration-count）

animation-iteration-count該屬性就是定義我們的動畫播放的次數。次數可以是1次或者無限迴圈。
預設值只播放一次。

single-animation-iteration-count = infinite | number

5.動畫填充模式（animation-fill-mode）

animation-fill-mode是指給定動畫播放前後應用元素的樣式。

single-animation-fill-mode = **none **| **forwards **| **backwards **| both

• animation-fill-mode: none 動畫執行前後不改變任何樣式
• animation-fill-mode: forwards 保持目標動畫最後一幀的樣式
• animation-fill-mode: backwards 保持目標動畫第一幀的樣式
• animation-fill-mode: both 動畫將會執行 forwards 和 backwards 執行的動作。

6.動畫播放狀態（animation-timing-function）

animation-play-state: 定義動畫是否執行或者暫停。可以確定查詢它來確定動畫是否執行。
預設值為running

single-animation-timing-function = running | paused

• running 動畫正常播放
• paused 動畫暫停播放

SVG動畫實踐

動畫實踐

分享一些CSS3動效網站: