will-change屬性可以提前通知瀏覽器我們要對元素做什麼動畫，這樣瀏覽器可以提前準備合適的優化設定。這樣可以避免對頁面響應速度有重要影響的昂貴成本。元素可以更快的被改變，渲染的也更快，這樣頁面可以快速更新，表現的更加流暢。
舉個例子，當對於素使用 css 3d變形時，元素及其內容可以在合成到頁面之前被建立到我們之前說的layer。然而把元素放到layer中是個昂貴的操作，這將會導致變形動畫延遲乙個課件的瞬間，也就是flicker
為了避免這種延時，我們可以在發生之前通知瀏覽器，這樣瀏覽器會有一定的時間去準備這些變化，當發生的時候layer已經準備好了，這樣動畫酒會很流暢，不會閃屏
使用will-change提示瀏覽器關於即將發生的變形十分簡單，新增個css屬性就行
will-change: transform;will-change: transform, opacity;will-change顧名思義，通知瀏覽器即將發生的變化，而不是正在發生的變化。使用will-change，我們要求瀏覽器重點照顧我們宣告的元素，為了這個瀏覽器需要一定的時間來組織優化操作，這樣當變化發生的時候，優化才能沒有延遲的作用到元素
在變化前立即為元素新增will-change幾乎沒有作用，可能還不如不設定，因為會導致新的layer建立
.element
:hover
.element
.element
:hover
.element
:active
如果一定要hover的時候，也有技巧
.element
/* declare changes on the element when the mouse enters / hovers its ancestor */
.ancestor
:hover
.element
.element
:hover
CSS3中的屬性
讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素，從頂端移...
CSS3中的box sizing屬性
box sizing屬性是css3中新新增的屬性，用來替換原來的css盒子模型，box sizing屬性值的不同，元素的高度和寬度的計算方法也不同。box sizing的三個屬性值，我們只針對前兩個說明 box sizing content box box sizing border box box...
css3中的動畫屬性
一 過渡動畫 transition 過渡動畫，就是能讓css樣式的變化，體現的更明顯一點，讓使用者能更清晰的看見樣式的變化。過渡的實現我們一般通過事件來觸發 例如滑鼠單擊 獲得焦點 被點選或對元素任何改變中觸發 1.transition property 檢索或設定物件中的參與過渡的屬性 all為預...