<CSS動畫-2>

網頁小社第五堂

講師:嗯嗯

<複習-滑鼠動畫>

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

<animation>

自製動畫啦

@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 ...

animation練習

<最後最後>

廣告時間

來寒訓!!!

 

Made with Slides.com