參考資料：CSS animations | MDN
CSS 動畫是一組 CSS 設定，用來定義如何利用關鍵影格隨時間改變 CSS 屬性的值。
animation 相關屬性 : 如何改變屬性。
@keyframes 關鍵影格 : 何時改變哪些屬性。
此功能在某些瀏覽器尚在開發中，需要加上不同瀏覽器用的前綴字串，例如
-moz-、-webkit-等等。
animation-name : 名字animation-duration : 週期時間animation-delay : 間隔時間animation-timing-function : 加速函式animation-iteration-count : 重複次數animation-direction : 播放方向animation-fill-mode : 前後設定animation-play-state : 播放狀態animation : 縮寫animation-name定義動畫的名字。
none : 預設值，表示沒有關鍵影格，可用來取消動畫none、unset、initial 或 inheritanimation-duration定義動畫的一次週期的時間長度。 單位可以是秒 (s) 或毫秒 (ms)，必須要有單位。預設值是 0s。
animation-delay定義元素從套用動畫設定到開始播放動畫的間隔時間。
單位可以是秒 (s) 或毫秒 (ms)，必須要有單位。預設值是 0s。
animation-timing-function定義動畫播放時，設定值與時間的加速函式。
關鍵字 :
linear : 速度從頭到尾相同ease : 預設值，加速到中間，再減速到結束ease-in : 一開始慢速，持續加速直到結束ease-out : 一開始快速，持續減速直到結束ease-in-out : 一開始慢速，加速，再減速step-start : 只在動畫的開始停頓一次step-end : 只在動畫的結束停頓一次貝茲曲線 :
cubic-bezier(p1, p2, p3, p4) : 自定義貝茲曲線，p1 和 p3 必須介於 0 和 1 之間停頓 :
steps(n, jumpterm) : 停頓 n 次且任兩次停頓之間的時間相同，根據以下 jumpterm 決定停頓的方式jump-start : 將動畫的開始設為第一次停頓jump-end : 將動畫的結束設為最後一次停頓jump-none : 動畫的開始與結束皆不設為停頓jump-both : 動畫的開始與結束皆設為停頓animation-iteration-count定義動畫重複的次數。
infinite : 永遠重複播放animation-direction定義動畫的播放方向。
normal : 預設值，順向播放reverse : 反向播放alternate : 先順向再反向alternate-reverse : 先反向再順向animation-fill-mode定義元素在動畫開始前及結束後如何套用屬性設定。
none : 預設值，不套用屬性設定forwards : 動畫結束後套用最後一個關鍵影格的屬性設定backwards : 從套用動畫設定到開始播放動畫為止，也就是在 animation-delay 期間，套用最後一個關鍵影格的屬性設定both : 同時依循 forwards 和 backwards 的規則animation-play-state控制動畫的播放狀態。
running : 預設值，播放paused : 暫停animationanimation 就是上述八種屬性的縮寫，每個屬性的值都是可有可無。
名字可以是 none 或自定義字串，不能是其它屬性的關鍵字 :
animation-name最多 2 個時間值，第一個會設定為週期時間，第二個會設定為間隔時間 :
animation-durationanimation-delay其它屬性的值 :
animation-timing-functionanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state每一組關鍵影格都需要有一個名稱。
關鍵影格使用百分比來指出屬性設定會在整個漸變流程中的哪個時間點出現。
一組關鍵影格當中至少要有兩個關鍵影格，開始和結束。
0% 或 from100% 或 to1link<!-- html -->
2link<element class="class"></element>
1link/* css */
2link.class {
3link animation-name: name;
4link}
5link
6link@keyframes name {
7link from {
8link // CSS;
9link }
10link // percentage {
11link // CSS;
12link // }
13link to {
14link // CSS;
15link }
16link}