iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 11
0
自我挑戰組

CSS 大全（第四版）閱讀筆記系列 第 11 篇

Day11【主題三：動畫】＿keyframe選擇器/ 讓元素動起來

11th鐵人賽
752 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    day26【主題六：選擇器】筆記１
  2. 27
    day27【主題六：選擇器】筆記2
  3. 28
    day28【主題六：選擇器】筆記3-動態、介面狀態虛擬類別
  4. 29
    day29【主題七：邊界範圍】
  5. 30
    day30【主題八：數值與單位】
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19847 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙