三天內學會CSS3 Animation

三天內學會CSS3 Animation

一直以來我對CSS3 Animation這件事情並沒有特別專注研究(如果需要也是用javascript完成XD)，直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。

如果你和我一樣，平常很少使用特效，需要在短時間內熟悉而有即戰力，這篇文章也許可以給你一些方向。

一開始先到W3School先把所有指令快速看一次，大概熟悉這些指令和屬性就可以了。

  • @keyframes：放置動畫程式碼的地方。
  • animation：總稱，包含animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state和animation-timing-function。
  • animation-delay：動畫延遲多久才開始。
  • animation-direction：動畫進行的方向。
  • animation-duration：動畫從開始到結束需要多少時間。
  • animation-fill-mode：動畫結束時停留的狀態，維持在初始或結束時等狀態。
  • animation-iteration-count：動畫重覆次數，可設定無限次。
  • animation-name：@keyframes的名稱。
  • animation-play-state：動畫撥放或暫停。
  • animation-timing-function：運動曲線函數，例如：ease、linear等。

並做了一個非常簡單樸素的練習。

CSS3 Animation

是不是單純的可愛呢 XD

然後再到MDN補一下細節，對指令有較深入的了解，接下來就可以找些較複雜的範例來練習了(照著打就對了)。

第一個範例是Old School Clock with CSS3 and jQuery，文章內會一步一步帶著大家完成。雖然範例中沒有用到@keyframes，但如果你跟我一樣習慣用javascript操作物件，這是一個讓人卸下緊張害怕的心防的好練習題噢(其實也沒那麼神祕嘛！)，之後要改寫成純粹的CSS3 Animation也沒問題。

CSS3 Animation - Old School Clock with CSS3 and jQuer

再來，就是來做比較複雜的練習，把在Tutorial學到的都應用上去 - Solar System animation - Pure CSS。

CSS3 Animation - Solar System animation - Pure CSS

再來個有時序概念的練習...CSS3 Graph Animation

CSS3 Graph Animation

順便推薦兩個我滿喜歡的範例...A love for Cats和Animated CSS3 Heart。如果有時間的話多練習這兩個也不錯。

CSS3 Animation - A love for Cats

Animated CSS3 Heart

以上練習都會放在我的github上。做完範例就提槍上戰場啦。

References

Tutorial

  • CSS3 Animations | W3School：W3School的CSS3 Animations講得非常淺顯易懂，如果想要先快速有個概念，這是一個很好的選擇。
  • CSS 動畫 - CSS | MDN：對於每個指令有較深入的說明，可以補充和當字典查詢。

Exmaple

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-三天內學會 CSS3 動畫。

留言

張貼留言