三天內學會 CSS3 動畫

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

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

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

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

CSS3 Animation

是不是單純的可愛呢 XD

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

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

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 CatsAnimated CSS3 Heart。如果有時間的話多練習這兩個也不錯。

CSS3 Animation - A love for Cats

Animated CSS3 Heart

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

後記

(2017/07/18 更新)

補上上線成果-露天拍賣首頁

露天拍賣-首頁HTML5廣告

References

Tutorials

Exmaples


這篇文章的原始位置在這裡-三天內學會 CSS3 Animation

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

css3 animations css