iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 11

Day11【主題三:動畫】_keyframe選擇器/ 讓元素動起來

  • 分享至 

  • xImage
  •  
  1. keyframe選擇器:
  • keyframe選擇器能在動畫特定時間點,設定想要賦予動畫能力屬性的數值。
  • 組成可以是一個以上用逗號分割的百分比值,可以是from(0%)或to(100%)關鍵字。
  • 使用百分比做選擇器時,一定要加上%單位。0是不合法的keyframe選擇器。
  • 如果沒有指定0%或from、100%或to,瀏覽器會以要附加動畫的屬性原始值建構keyframe。
  • 負值、超過100%的值或不是百分比,也不是to 和from關鍵字的值都不合法。
  • 可動畫屬性的「中點」規則的例外屬性: [1] visibility、[2] animation-timing-function
  1. 讓元素動起來
  • 需要將動畫名稱、效果週期,指定到要產生動畫效果的元素裡。
  • animation-name屬性用於指定動畫名稱。接受逗號分隔名稱串列。
  • 如果有多個套用到元素的動畫包含重複的屬性,那麼對相同屬性的設定值,較晚指定的動畫效果會覆寫教早指定的動畫效果。

本節待續...


上一篇
Day10【主題三:動畫】_定義keyframe/設定keyframe動畫
下一篇
Day12【主題三:動畫】_讓元素動起來
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言