iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
自我挑戰組

30天的css animation修練系列 第 1

初探 css animation -第一天的美好邂逅(?)

  • 分享至 

  • xImage
  •  

前言
本人是個普通css還寫得零零落落,爬的不好還想飛的低手設計師
第一次參加活動,激勵一下自己的心志XD
若有不週之處,煩請看官們海涵哪!
馬上來進入正題

首先
css動畫的屬性(properties)有 8 個
如果將樣式簡寫,必定要有的內容有二

  • 動畫的名稱
  • 動畫所耗費的總時間

簡寫寫成css就會長這樣

/*我懶惰我驕傲 就是要簡寫*/
.lazydog{
animation:my-animate 2s;
}

動畫名字跟class的命名方式基本上一樣,只要取個不容易讓自己混淆的名字就可以。
時間的話,數字除整數以外,還可以填帶有小數點的單位,像是0.5、0.2 等等,但填分數的話是不行的 但會這樣做的人應該不多吧,時間單位可以填 s 跟 ms,1000ms=1s 如果填min也是不行的 但應該也不會有人這樣做吧

覺得寫很多行很充實,就是想把屬性寫好寫滿的
下一篇我們再來探討吧XD

下回預告
來勢洶洶的css動畫屬性


下一篇
初探 css animation - 來勢洶洶的動畫屬性(上)
系列文
30天的css animation修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言