承接上一篇的簡寫css animation
這篇要來說明css動畫究竟有哪些屬性，然後把所有屬性都輕輕帶過一輪

接下來針對各個屬性做稍微更深入的說明
大家打起精神啊 雖然我覺得這部分是滿無聊的XD

animation name

在上篇提過，主要就是取個自己不會誤解的名稱就可以

animation-duration

動畫的時間長，必須大於等於 0 ，負數無效，正整數或小數都可以。
單位是秒(s)或毫秒(ms)。
補充：
根據人類資訊處理模型(Model Human Processor)來說，人類感知到物件平均約需要 230ms(0.23s)，但不同人的最短感知時間到最長的感知時間分別從 70ms 到 700ms 不等。
如果是簡單且重覆性高的選單動態效果，使用過長的時間(600ms=0.6s)反而會讓用戶有冗長的感覺，使用較短的時間(250ms=0.25s)多數人可以感受到動態效果，同時也不會覺得有等待的感覺。

animation-timing-function

動畫的速率曲線，由貝茲曲線(Cubic Bezier)構成的函數圖型，可以使用已預先定義好的值。
如：linear(線性)、ease(初始與結束減速，中間加速)、ease-in(緩入)、ease-out(緩出)、ease-in-out(緩入緩出)。
也可以自行定義構成貝茲曲線的數值(n1,n2,n3,n4) n1-n4為介於 0-1 之間的小數。

補充：
linear 的動態會看起來相當機械化也不太自然，並不太建議使用。
ease-in 會使結尾加速，有可能會讓使用者感到突兀。
ease-out 通常較適用於使用者介面，開頭加速能讓使用者有好的反饋，而結尾減速則可以提供緩衝的感覺，同時也符合現實中的物理狀態。
ease-in-out 適當使用，有時候可以達到比純 ease-out 更強的戲劇感。
但不要使用過長的動畫時間，因為開頭減速會讓動態有遲鈍感，通常 300ms-500ms 的範圍會比較適當。

animation-delay

定義動畫開始的時間，單位為秒(s)或毫秒(ms)。
可以設定負值，設定負值則意味著立即開始動畫，而且動畫也會提早結束。
舉例來說：
整個動畫有10秒，
將 animation-delay 設為 0 ，動畫播放到第 10 秒後結束。
將 animation-delay 設為 2 ，動畫會延遲 2 秒開始，播放到第 12 秒後結束。
將 animation-delay 設為 -2 ，動畫會跳過 2 秒開始，播放到第 8 秒後結束。
線上的案例可以參考這裡：
https://codepen.io/kmokidd/pen/bBRQjV

本文參考資料來源
https://ux.stackexchange.com/questions/66604/optimal-duration-for-animating-transitions
https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-tw
https://zhuanlan.zhihu.com/p/23982450

下一篇接續講剩下的屬性
來勢洶洶的動畫屬性(下)
不知不覺寫的有點囉嗦啊XD