css3 動畫（三）animation 簡介

前言

上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animation。

animation

css3 中的 animation 屬性是一系列配置的簡寫形式，其子屬性有：

• animation-delay：動畫開始時的延遲時間。預設 0s，無延時
• animation-direction：動畫是否反向播放。預設 normal，表示動畫結束之後，回到起點狀態
• animation-duration：動畫時長。預設 0s，無動畫
• animation-iteration-count：動畫重複次數。預設 1，只執行一次動畫
• animation-name：動畫名稱，該名稱為動畫關鍵幀的名稱。預設 none
• animation-play-state：動畫狀態，即是處於播放還是暫停狀態。預設 running，為播放狀態
• animation-timing-function：動畫速度。預設 ease
• animation-fill-mode：指定在動畫執行之前和之後如何給動畫的目標應用樣式。預設 none 如何理解？

animation-name

animation-name 表示的是關鍵幀的名稱，那麼如何定義關鍵幀呢？使用 @keyframes。

@keyframes

@keyframes 是定義 css3 animation 動畫的關鍵所在。通過定義每一幀的樣式狀態，比 transition 能更好地控制中間過程。假如說 transition 只能定義 “兩幀” 的狀態，則 animation 可以定義 “n幀（n >= 2）” 的狀態。

語法

“@keyframes + 名稱 { // 關鍵幀樣式… }”

@keyframes move {
  from { width: 100px; }
  to { width: 200px; }
}
/* 或 */
@keyframes move {
  0% { width: 100px; }
  100% { width: 200px; }
}

總結

其實 animation 也並不複雜，其有 8 個子屬性。

下一篇：css3 動畫（三）animation.css 原始碼解析（通過閱讀 animation.css 動畫庫的原始碼，來提高對 css3 中 animation 屬性的認識）