CSS3 的動畫的意義何在？

01-14

CSS3的動畫，JS都能實現，而且提倡的是HTML、CSS、JS三者分離，交互這些東西是不是應該都有JS來實現呢？現在主流的瀏覽器CSS3是支持的，但是要考慮兼容性的話，代碼應該更加複雜了吧？

1，對前端來說簡單易用；

2，聲明式的動畫，瀏覽器內核更容易進行優化，也避免了 JavaScript 的低性能和性能波動（GC或者JIT導致的停頓）導致掉幀；

3，部分加速的CSS動畫（Transform Opacity）可以完全由內核的合成器驅動，完全使用GPU加速，對CPU的開銷很小；

4，隨著內核合成器的持續演進，可加速的CSS動畫有望越來越多；

一，簡單，聲明式的動畫描述比JS模擬的逐幀動畫好弄的多，LZ你自己實現一次JS動畫引擎就知道了。

二，性能，使用JS對DOM節點操作進行變換會帶來大量重排、重繪，而CSS3動畫可以比較好的規避這點，甚至可以利用GPU進行加速。

所以LZ，你說意義何在呢？

所以我現在大部分時間都是用CSS搞動畫，但動效設計並不是都是簡單的fadeIn、fadeOut這樣的過場效果，同時CSS3提供的緩動函數也很有限，而有時候產品可能會需要比較複雜的基於現實的模擬，這時候就只能上JS了。

至於前綴方面的兼容性，善用gulp、grunt，Autoprefixer、css-grace(一絲姐做的)，歡迎你。

理想的情況當然是，HTML寫控制項，CSS寫皮膚，Javascript做data binding寫邏輯。網站的內容放SQLServer里。但是實際上因為前端的那三種每種都有不同的缺陷導致這麼完美的組合用起來成了屎，於是世界就變成你看見的這個樣子了。

當然在上面的組合里，CSS管動畫是合理的。

你需要一款動畫引擎

「HTML5, jQuery, Canvas, CSS, new browsers, old browsers, RequireJS, EaselJS, mobile, and more – GSAP gets along with them famously. Use your favorite tools without jumping through endless hoops to ensure compatibility. It even accommodates various transforms (scale, skew, rotation, x, and y) in modern browsers plus IE back to version 6 without requiring clunky browser prefixes and hacks. We worry about compatibility so that you don』t need to. Another headache solved.」

css3作動畫一般只兼容高版本主流瀏覽器，用低級瀏覽器的人根本不需要css3動畫。

0.css是聲明動畫，js是製作動畫。一個是輪子早好設計一下尺寸，另一個是自己造。

1.如有些東西沒有css3，單靠js很噁心，比如transform中scale，如果用js控制height，width是不能更改中心點的，用transform-origin就可以直接控制。

2.性能，js的性能用來做動畫不合適，更應該把性能用來處理邏輯。

3.css js html 分離的樣式、邏輯和內容，其實呢，動畫不屬於邏輯。

4.前綴，大家都在砍前綴啦，不要急，有一些也不用前綴了，比如transition。另外就是加上前綴css也比js簡單。

因為我們發現js寫交互效果的花銷和效果不如css，實現上不如css直觀（當然，js有大量動畫庫，傻瓜式使用，所以以上說法基於無第三方庫的情景下），綜合上說，傾向於用css實現交互效果和界面建設，js實現數據交互。

難道題主沒感覺css3動畫流暢很多嗎？使用也更方便，個人覺得css3實現再多的效果也不為過

確實，我們是提倡 html css js 分離的。

html 管骨架，css 管皮膚，js 管動作。

然而，動畫這東西，你說它是皮膚（展示效果）的一部分，還是動作（元素行為）的一部分呢？

在這個模糊地帶，css3 的動畫就冒出來尋找它的意義咯。

GPU實際上可以看作一個獨立的計算機，它有自己的處理器和存儲器及數據處理模型。當瀏覽器向GPU發送消息的時候，就像向一個外部設備發送消息。

你可以把瀏覽器向GPU發送數據的過程，與使用ajax向伺服器發送消息非常類似。想一下，你用ajax向伺服器發送數據，伺服器是不會直接接受瀏覽器的存儲的信息的。你需要收集頁面上的數據，把它們放進一個載體裡面（例如JSON），然後發送數據到遠程伺服器。

同樣的，瀏覽器向GPU發送數據也需要先創建一個載體；只不過GPU距離CPU很近，不會像遠程伺服器那樣可能幾千里那麼遠。但是對於遠程伺服器，2秒的延遲是可以接受的；但是對於GPU，幾毫秒的延遲都會造成動畫的卡頓。一篇文章說清瀏覽器解析和CSS（GPU）動畫優化

對於前端工程師來說，css3動畫是最友好的，看看屬性介紹，最低成本就可以獲取到不錯的效果。其它方案成本則很高，收益比太差。

1.首先在選擇器上，css3支持更複雜的屬性選擇器和更高級的組合選擇器，這些豐富的功能讓設計師們可以靈活地控制網頁樣式，不用擔心因為選擇了某些元素而破壞文檔結構。

2.在樣式設計上，css3支持圓角效果，陰影效果，透明效果，漸變效果，變換效果，過渡效果，動態效果，動畫效果，倒影效果，文本特效，邊框特效，真彩色，透明色，漸變色，背景色等。如果沒有css3，那就得用js實現了，哭去吧。

3.暫時想這麼多，沒有4了。

Learn all about CSS3 Animation here http://www.tutorialspark.com/css3/CSS_2d_transform.php

技術層面的問題樓上們已經說的可以了。給你打個比喻：

以收發電子郵件為例，使用客戶端收發郵件和登錄郵箱網頁進行收發郵件有什麼區別呢？為什麼很多人經常使用客戶端而不是使用網頁呢？

對用戶側體驗來說：

1. css 動畫較js來說要輕量。性能比js的要好得多。js動畫會影響dom還會帶來各種repaint。個人愚見一直覺得這是種得不償失的事——為什麼要為了非必要的效果拖慢整個網站。有點像考試為了做加分題但是導致基礎題忘了做的感覺。

對開發側來說：

1.對於如我這般不善於js的人，對css3動畫簡直要豎起n個大拇指了。開發起來直觀簡單。也不會有各種找不到的bug阻礙開發效率。css動畫的好處了省略了各種邏輯~什麼translate，scale，rotate完全不用想..一句話就搞定了~（也可能我js太爛不了解js也有簡單的做法吧^_^）

而對於lz說的三者分離：

三者分離我覺得是結構表現行為三者分離。

個人覺得動畫也算是表現層的東東。畢竟沒了動畫不會影響用戶在網站上做的交互行為。它對我來說只是個讓人更爽的裝飾而已啦~

個人淺見哈~

css3是聲明式的動畫，它效率比js動畫高。js動畫實際上依賴的是節點的css屬性的逐漸改變，效率低下。就算是css3動畫也是需要js來協作的。比如給dom節點附加動畫，節點的序列型的複雜動畫。