iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

30天讓設計師搞定CSS/SVG動畫系列 第 4

CSS動畫-Animation(二)(name/duration/delay/timing-function)

  • 分享至 

  • xImage
  •  

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 | 繼承父元素屬性值 | 全域值

https://ithelp.ithome.com.tw/upload/images/20181017/20111500dECPJzMVeo.png

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是什麼?),自製圖片動畫,是一種非連續動畫,類似逐格動畫,一步步進行

https://ithelp.ithome.com.tw/upload/images/20181019/201115005REVVttFFy.jpg

  • 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/


上一篇
CSS動畫-Animation(ㄧ)概述
下一篇
CSS動畫-Animation(三)(iteraction-count/direction/fill-mode/play-state)
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言