<CSS動畫>

網頁聯課第三堂

講師：嗯嗯

上週作業有做完了嗎

<CSS-動畫>

讓網站更生動～

動畫有哪些

滑鼠滑入

滑鼠長按

滑鼠點擊

鍵盤打字

不斷地動就好

今天會教滑鼠滑入、滑鼠長按、讓他一直動

其他的等到JavaScript吧

滑入&長按

動畫有哪些

hover：滑鼠滑入

active：滑鼠長按

.class:hover{
	滑鼠滑入後的css
}

滑鼠動畫練習

讓動畫不會卡卡的

什麼是transition？

屬性

transition-property：指定要轉換的CSS屬性

transition-duration：轉換需要的時間，預設0，單位為s或ms

transition-delay：延遲多久轉換，預設0，單位為s或ms

transition-timing-function：轉換時的速度曲線，預設ease

transition：property duration delay timing-function

速度曲線

transition練習

自製動畫啦

@keyframes

影格的概念

from...to...

幾%的時候做什麼

@keyframes 動畫名稱{
  from{
    屬性：值;
  }
  to{
    屬性：值;
  }
}

@keyframes 動畫名稱{
  0%{
    屬性：值;
  }
  50%{
    屬性：值;
  }
  100%{
    屬性：值;
  }
}

animation

animation-name：要套用的keyframes名稱

animation-duration：動畫持續多久

animation-iteration-count：動畫執行次數(無限次：infinite)

animation-timing-function：速度曲線

animation-fill-mode：動畫開始或結束時，元素呈現是最終影格的狀態或初始影格的狀態

animation: name duration count ...