如何才能防止在給box-shadow製作動畫過渡時導致的每一幀都要進行的重繪（re-paint），從而提高頁面的效能？
答案就是：不可能。給變化的box-shadow製作動畫會大大縮減頁面渲染的效能。
但是，這裡依然有類似的方法實現相同的效果。盡量的減少重繪的次數，可以保證你的動畫能夠保證在60 fps左右：通過改變子元素的opacity透明度。
檢視這個demo，比較一下兩種實現方式的不同。左邊的動畫是在box-shadow的:hover狀態時執行box-shadow動畫， 而右邊的實現方式中，我們通過:after新增了乙個偽元素，並給它新增了box-shadow， 然後通過執行opacity動畫來是實現相同的效果。
如果你開啟你的除錯工具，可以看到下面類似的結果（綠色部分表示繪製；越少越好）：
很明顯如果我們直接執行box-shadow的動畫會導致更多的重繪。
為什麼會有這樣的結果？ 只有很少的屬性 才能避免在動畫的過程不斷的重繪，像opacity和transform。
這就是兩種方式的不同之處，下面是核心**：
/* the slow way */
.make-it-slow
/* transition to a bigger shadow on hover */
.make-it-slow:hover
/* the fast way */
.make-it-fast
/* pre-render the bigger shadow, but hide it */
.make-it-fast:after
/* transition to showing the bigger shadow on hover */
.make-it-fast:hover:after
opcity執行動畫。 譯 CSS動畫 vs JS動畫
目前有兩個主流的方法在web上建立動畫 使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。tips 很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋 如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制...
譯 如何高效的使用 Git
昨天還是執行好好的今天就不行了。被刪了。突然出現了乙個奇怪的 bug，但是沒人知道怎麼回事。如果你出現過上面的任何一種情況，那本篇文章就是為你準備的。除了知道git add,git commit,git push之外，git 中還需要其他重要的技術需要掌握。長遠來看對我們是有幫助的。這裡我將向你展示...
原譯 11個高效的VS除錯技巧
介紹 除錯是軟體開發周期中的乙個很重要的部分，有時很有挑戰性，有時候則讓程式設計師迷惑，有時候讓程式設計師發瘋，但是。可以肯定的是，對於任何不是太那個微不足道的程式來說，除錯是不可避免的。近年來，除錯工具的發展已經使得很多除錯任務簡單省時了。本文總結了十個除錯技巧，當你使用vs的時候可以節省你很多時...