iT邦幫忙

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

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

Day13【主題三：動畫】＿讓元素動起來

11th鐵人賽
501 瀏覽

  • 分享至 

  • xImage
    •  
  1. 使用animation-delay可以將動畫鍊接在一起，各列表項目animation-delay值是前一個烈表項目的animation-duration與animation-delay的和。
  2. 動畫效果在UI執行緒的優先權是最低的。
  3. animation-timing-function：
  • animation-timing-function屬性描述了動畫在一個周期或循環裡的進行。
  • linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(, start) | steps( ,end) | cubic-bezier(n,n,n,n)
  • animation-timing-function宣告的是正常動畫方向的時脈，動畫時脈函數也會隨之反轉
  1. 貝茲曲線：
  • X軸必須介於0和1之間，Y座標沒有限制。
  • 曲線越陡，動作速度越快。
  • 透過大於1或小於0的y值，能夠產生彈跳效果。
  • S型曲線，y值一個正值和一個負值
  1. 步進時脈函數：
  1. animation-play-state：
  • animation-play-state屬性定義動畫是否執行或暫停
  • running播放／ pause停止
  1. animation-fill-mode：
  • animation-fill-mode屬性可以決定該動畫效果在「開始之前」是否要套用 0% 時的狀態；動畫「結束之後」，是否要停留在結束時的狀態，即 100%。
  • 設定 animation-fill-mode: none;預設值，表示沒有任何效果
  • 設定 animation-fill-mode: forwards; 的效果，會發現，最後的結束狀態，停留在 100% 時的樣式上
  • 設定 animation-fill-mode: backwards; 也可以讓元素一開始就套用 from 或 0% 的狀態。
  • 設定 animation-fill-mode: both：同時套用 forwards 和 backwards
  • 使用 animation-fill-mode 設定當動畫「開始之前」或「結束之後」的狀態

上一篇
Day12【主題三：動畫】＿讓元素動起來
下一篇
Day14【主題三：動畫】＿animation縮寫 / 動畫權重與優先順序
系列文
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鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23097 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙