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 屬性的認識）