我是一個今年八月中才開始碰前端的網頁設計師，對於前端的基礎完全是零(JavaScript、jQuery...完全不懂，是真的一點基礎都沒有)，剛開始主管請我們練習寫一個有轉場動畫的Slider，依稀記得他跟我們說能用CSS寫動畫就用CSS寫，當時很不解為什麼，只知道我也只會用CSS寫...

後來才了解原來CSS 架構的動畫通常是由瀏覽器「主執行緒」的另一獨立執行緒處理；
而樣式、版面配置、繪製與 JavaScript 都是在主執行緒上處理。
這代表如果瀏覽器在主執行緒上執行某一些高成本任務，CSS 架構的動畫可能會一直運作，而不被中斷。

簡而言之，就是CSS動畫在大部分情況下較不吃網頁效能，能夠獨立運作。
所以，如果是一次性的動畫，就用CSS。
但如果想控制動畫，就用JavaScript，像是控制動畫暫停、停止等等。

且對於大部分網頁設計師而言，專門的通常是HTML及CSS，有時候我們切好畫面交給工程師並溝通想呈現的樣子，但畫面有時候就是會不如預期呈現，對於設計師來說，CSS animation相較於JavaScript比較好上手，
所以如果我們能用CSS在最大限度下呈現我們腦海裡的畫面動態，不只有成就感，也更能忠實呈現原來的想法。

但，我原本會的CSS動畫，雖說會用，但也是一知半解，所以我想將這30天當作自己的學習筆記，希望藉由這次的鐵人賽逼自己利用下班或放假的空閒時間深入學習CSS和SVG動畫部分。

接下來30天會開始介紹CSS3後興起的CSS動畫以及更進階的SVG動畫，看如何在沒有工程師的幫助下發揮最大極限！

參考來源：
[1] https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript?hl=zh-tw
[2] https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance?hl=zh-tw#css-vs-javascript-performance