Animation(name/duration/delay/timing-function)

今天先介紹animation與transition相似的屬性:

• animation-name：動畫名稱(可以自行取名)
• animation-duration：動畫播放一次需要的時間，單位為s或ms
• animation-delay：延遲多久播放動畫，單位為s或ms
• animation-timing-function：動畫播放的速度曲線

屬性都是字面上意思，所以今天重點會直接探討animation-timing-function囉～

Animation-timing-function 動畫播放速度曲線

(小提醒：transition和animation的timing-function可用的屬性值都是一樣的喔～只是animation會比transition部分更詳細介紹屬性值 )

屬性值介紹

名稱| 說明 | 類別
------------- | -------------
linear| 均速| 關鍵字
ease | 緩入中間快緩出(預設值) | 關鍵字
ease-in | 緩入| 關鍵字
ease-out | 緩出| 關鍵字
ease-in-out | 緩入緩出(對比於ease較平緩) | 關鍵字
step-start | 等於寫法steps(1,start)| 關鍵字
step-end | 等於寫法steps(1,end)| 關鍵字
steps | steps(int,start/end)非連續動畫，類似逐格動畫，一步步進行| 函數
cubic-bezier(n,n,n,n)| 利用貝茲曲線自定義速度模式，可參考https://cubic-bezier.com/ | 函數
initial | 保持元素初始屬性值 | 全域值
inherit | 繼承父元素屬性值 | 全域值

Linear

均速，等於cubic-bezier(0,0,1,1)

Ease

• ease
  緩入中間快緩出，是預設值，等於cubic-bezier(.25,.1,.25,1)
• ease-in
  緩入，等於cubic-bezier(.42,0,1,1)
• ease-out
  緩出，cubic-bezier(0,0,.58,1)
• ease-in-out
  緩入緩出(對比於ease較平緩)，等於cubic-bezier(.42,0,.58,1)

Step

可用於非CSS屬性的動畫，像是在Sprite(Sprite是什麼?)，自製圖片動畫，是一種非連續動畫，類似逐格動畫，一步步進行

• step-start
  由上圖可以得知，step-start會直接跳到100%，直到週期結束，就是從100%開始到結束，所以不會看到第一個影格。
• step-end
  由上圖可以得知，step-end會從0%開始，到週期結束的點跳到100%，就是從0%開始到最後突然跳到100%結束，所以導致看不到最後一個影格。
• steps(int,position)
  • int：必須是大於0的正整數，代表動畫的間隔數
  • position：就是start或end，如沒有寫，會直接帶入預設end

～來個動畫賽跑～<CodePen連結>

• 最後補充個有趣的東西easing函數，有各種狀態模擬animation可以挑選，不用用cubic-bezier慢慢調，不一定要使用它的函數，它也提供寫好的CSS供你參考！

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1] https://www.w3schools.com/cssref/css3_pr_animation.asp
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
[3] https://ithelp.ithome.com.tw/articles/10195313
[4] https://idiotwu.me/understanding-css3-timing-function-steps/
[5] https://drafts.csswg.org/css-easing/
[6] https://wcc723.github.io/css/2013/08/24/css-transtion-speed/