三天內學會 CSS3 動畫
05 Mar 2016一直以來我對 CSS3 動畫這件事情並沒有特別專注研究(如果需要也是用 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 等。
並做了一個非常簡單樸素的練習。
是不是單純的可愛呢 XD
然後再到 MDN 補一下細節,對指令有較深入的了解,接下來就可以找些較複雜的範例來練習了(照著打就對了)。
第一個範例是 Old School Clock with CSS3 and jQuery,文章內會一步一步帶著大家完成。雖然範例中沒有用到@keyframes
,但如果習慣用 JavaScript 操作物件,這是一個讓人卸下緊張害怕的心防的好練習題噢(其實也沒那麼神祕嘛!),之後要改寫成純粹的 CSS3 Animations 也沒問題。
再來,就是來做比較複雜的練習,把在 Tutorial 學到的都應用上去 - Solar System animation - Pure CSS。
再來個有時序概念的練習…CSS3 Graph Animation
順便推薦兩個我滿喜歡的範例…A love for Cats 和 Animated CSS3 Heart。如果有時間的話多練習這兩個也不錯。
以上練習都會放在我的 github 上。做完範例就提槍上戰場啦。
後記
(2017/07/18 更新)
補上上線成果-露天拍賣首頁。
References
Tutorials
- CSS Animation
- CSS3 Animations:W3School 的 CSS3 Animations 講得非常淺顯易懂,如果想要先快速有個概念,這是一個很好的選擇。
- CSS 動畫 - CSS :對於每個指令有較深入的說明,可以補充和當字典查詢。
- Web Animation 學習地圖
- Css3 Tutorial - Css3 Animation
Exmaples
- Old School Clock with CSS3 and jQuery:非常適合第一次接觸 CSS3 Animation 來做的第一個練習,結構簡單。
- CSS 3D Solar System:漂亮的太陽系動畫。
- Solar System animation - Pure CSS:也是一個漂亮的太陽系動畫,但結構較簡單。
- CSS3 Graph Animation:有時序概念。
- A love for Cats
- Animated CSS3 Heart
這篇文章的原始位置在這裡-三天內學會 CSS3 Animation
由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。