[ CSS 06 ] animation

animations

從 CSS3 開始可以做出基本的動畫了，CSS animations 在這動畫的運作上，只需要定義兩個部份：

動畫的最初及結尾
動畫轉變的方式。

Keyframes 關鍵影格

做動畫就一定要提到關鍵影格（英語：Key frame、Keyframe）是指在動畫和電影製作中繪製所有平滑變換中所必須定義的起點和終點。

關鍵影格選擇器的部分可使用：
1. from、to ：其實意思與 0% 和 100% 一樣。
2. 0-100% ：在時間的幾 % 時為何種 css 樣式。

@keyframes name {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}

@keyframes name {
  0% { top: 0; left: 0; }
  50% { top: 50px; }
  100% { top: 100px; left: 100%; }
}

sub-properties

子屬性	描述
animation-delay	定義元素讀取完畢到動畫開始的間隔時間
animation-direction	定義動畫播放完畢後將會反向播放
animation-duration	定義動畫完成一次週期的時間。
animation-iteration-count	定義動畫重複的次數。可以用 `infinite` 來讓動畫永遠重複播放。
animation-name	定義關鍵影格 `@keyframes` 的名字
animation-play-state	控制動畫的播放狀態。有 `pause` 和 `running` 兩種值，後者為預設值
animation-timing-function	定義動畫轉變時時間的加速曲線 (例如 linear)
animation-fill-mode	定義元素在動畫播放外(動畫開始前及結束後)的狀態

實例 : 球往下掉

原本 animation 都可以加屬性 name 、幾秒、 infinite 、alternate、 cubic-bezier 這些等等去調整動畫。

See the Pen Animation by TzuTzu (@tzutzu858) on CodePen.

補充: -webkit- 前綴字

webkit 是一種用來讓網頁瀏覽器繪製網頁的排版引擎。它被用於 Safari。其分支 Blink 被用於基於 Chromium 的網頁瀏覽器，如 Opera 與 Chrome。
由於目前通用性的寫法在 Chrome 上還是不能用，所以在 CSS 裡要多複製一份 @keyframes 動畫與 animation 屬性，並在前面加上 -webkit- 前綴字。

有 animation 範例的文章 :