iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
3

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

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

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

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

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

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

參考來源
[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


下一篇
CSS動畫-Transition
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言