iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

向CSScoke重新學習CSS系列 第 11

第十一天:Animation 和 transition 網頁動畫

  • 分享至 

  • xImage
  •  

觀看金魚都能懂的網頁設計入門:18、19

在網頁上若要呈現動畫,可儘量使用css語法做設計,能不用到javascript就不用,這樣可以降低其網路加載速度

Transition

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
透過transition 速度部分,可以使用漸變函式 (transition timing function),來改變速度從開始到結束的變化

transition: 屬性 轉換時間 延遲執行時間 速度

Animation

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations
infinite可以做重複播放

animation 動畫名稱 播放時間 延遲執行的時間 速度 次數
方向 填充模式 播放狀態

@ketframes 動畫名稱{
  0%{}
  100%{}
}

https://codepen.io/mikeyam/pen/mdPvYYP 小練習


上一篇
第十天:從基本排版中運用的小知識
下一篇
第十二天:RWD是什麼呢?
系列文
向CSScoke重新學習CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言