CSS中的動(dòng)畫(huà)

CSS動(dòng)畫(huà)（CSS Animations）是為層疊樣式表建議的允許可擴(kuò)展標(biāo)記語(yǔ)言（XML）元素使用CSS的動(dòng)畫(huà)的模塊?
即指元素從一種樣式逐漸過(guò)渡為另一種樣式的過(guò)程?
常見(jiàn)的動(dòng)畫(huà)效果有很多，如平移、旋轉(zhuǎn)、縮放等等，復(fù)雜動(dòng)畫(huà)則是多個(gè)簡(jiǎn)單動(dòng)畫(huà)的組合。
css實(shí)現(xiàn)動(dòng)畫(huà)的方式，有如下幾種：?

• transition 實(shí)現(xiàn)漸變動(dòng)畫(huà)?
• transform 轉(zhuǎn)變動(dòng)畫(huà)?
• animation 實(shí)現(xiàn)自定義動(dòng)畫(huà)

二、實(shí)現(xiàn)方式

transition 實(shí)現(xiàn)漸變動(dòng)畫(huà)?
transition的屬性如下：?

• property:填寫(xiě)需要變化的css屬性?
• duration:完成過(guò)渡效果需要的時(shí)間單位(s或者ms)?
• timing-function:完成效果的速度曲線?
• delay: 動(dòng)畫(huà)效果的延遲觸發(fā)時(shí)間?
  其中timing-function的值有如下：
  
  注意：并不是所有的屬性都能使用過(guò)渡的，如display:none<->display:block?
  舉個(gè)例子，實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去發(fā)生變化動(dòng)畫(huà)效果

<style>?.base {?width: 100px;?height: 100px;?display: inline-block;?background-color: #0EA9FF;?border-width: 5px;?border-style: solid;?border-color: #5daf34;?transition-property: width, height, background-color, border-width;?transition-duration: 2s;?transition-timing-function: ease-in;?transition-delay: 500ms;?}?/*簡(jiǎn)寫(xiě)*/?/*transition: all 2s ease-in 500ms;*/?.base:hover {?width: 200px;?height: 200px;?background-color: #5daf34;?border-width: 10px;?border-color: #3a8ee6;?}?
</style>?
<div class="base"></div>

transform 轉(zhuǎn)變動(dòng)畫(huà)?
包含四個(gè)常用的功能：?

• translate：位移?
• scale：縮放?
• rotate：旋轉(zhuǎn)?
• skew：傾斜?
  一般配合transition過(guò)度使用?
  注意的是，transform不支持inline元素，使用前把它變成block.

可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大?
animation 實(shí)現(xiàn)自定義動(dòng)畫(huà)?
animation是由 8 個(gè)屬性的簡(jiǎn)寫(xiě)，分別如下：

CSS 動(dòng)畫(huà)只需要定義一些關(guān)鍵的幀，而其余的幀，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來(lái)，?
通過(guò) @keyframes 來(lái)定義關(guān)鍵幀?
因此，如果我們想要讓元素旋轉(zhuǎn)一圈，只需要定義開(kāi)始和結(jié)束兩幀即可：

@keyframes rotate{?from{?transform: rotate(0deg);?}?to{?transform: rotate(360deg);?}?
}

from 表示最開(kāi)始的那一幀，to 表示結(jié)束時(shí)的那一幀?
也可以使用百分比刻畫(huà)生命周期

@keyframes rotate{?0%{?transform: rotate(0deg);?}?50%{?transform: rotate(180deg);?}?100%{?transform: rotate(360deg);?}?
}

定義好了關(guān)鍵幀后，下來(lái)就可以直接用它了：

animation: rotate 2s;

CSS頁(yè)面性能優(yōu)化

每一個(gè)網(wǎng)頁(yè)都離不開(kāi)css，但是很多人又認(rèn)為，css主要是用來(lái)完成頁(yè)面布局的，像一些細(xì)節(jié)或者優(yōu)化，就不需要怎么考慮，實(shí)際上這種想法是不正確的?
作為頁(yè)面渲染和內(nèi)容展現(xiàn)的重要環(huán)節(jié)，css影響著用戶對(duì)整個(gè)網(wǎng)站的第一體驗(yàn)?
因此，在整個(gè)產(chǎn)品研發(fā)過(guò)程中，css性能優(yōu)化同樣需要貫穿全程

CSS 優(yōu)化方式：
二、實(shí)現(xiàn)方式?
實(shí)現(xiàn)方式有很多種，主要有如下：?

• 內(nèi)聯(lián)首屏關(guān)鍵CSS?
• 異步加載CSS?
• 資源壓縮?
• 合理使用選擇器?
• 減少使用昂貴的屬性?
• 不要使用@import

內(nèi)聯(lián)首屏關(guān)鍵CSS?
在打開(kāi)一個(gè)頁(yè)面，頁(yè)面首要內(nèi)容出現(xiàn)在屏幕的時(shí)間影響著用戶的體驗(yàn)，而通過(guò)內(nèi)聯(lián)css關(guān)鍵代碼能夠使瀏覽器在下載完html后就能立刻渲染?
而如果外部引用css代碼，在解析html結(jié)構(gòu)過(guò)程中遇到外部css文件，才會(huì)開(kāi)始下載css代碼，再渲染?
所以，CSS內(nèi)聯(lián)使用使渲染時(shí)間提前?
注意：但是較大的css代碼并不合適內(nèi)聯(lián)（初始擁塞窗口、沒(méi)有緩存），而其余代碼則采取外部引用方式

異步加載CSS?
在CSS文件請(qǐng)求、下載、解析完成之前，CSS會(huì)阻塞渲染，瀏覽器將不會(huì)渲染任何已處理的內(nèi)容?
前面加載內(nèi)聯(lián)代碼后，后面的外部引用css則沒(méi)必要阻塞瀏覽器渲染。這時(shí)候就可以采取異步加載的方案，主要有如下：?

• 使用javascript將link標(biāo)簽插到head標(biāo)簽最后

// 創(chuàng)建link標(biāo)簽?
const myCSS = document.createElement( "link" );?
myCSS.rel = "stylesheet";?
myCSS.href = "mystyles.css";?
// 插入到header的最后位置?
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

設(shè)置link標(biāo)簽media屬性為noexis，瀏覽器會(huì)認(rèn)為當(dāng)前樣式表不適用當(dāng)前類型，會(huì)在不阻塞頁(yè)面渲染的情況下再進(jìn)行下載。加載完成后，將media的值設(shè)為screen或all，從而讓瀏覽器開(kāi)始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

通過(guò)rel屬性將link元素標(biāo)記為alternate可選樣式表，也能實(shí)現(xiàn)瀏覽器異步加載。同樣別忘了加載完成之后，將rel設(shè)回stylesheet

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

資源壓縮?
利用webpack、gulp/grunt、rollup等模塊化工具，將css代碼進(jìn)行壓縮，使文件變小，大大降低了瀏覽器的加載時(shí)間

合理使用選擇器?
css匹配的規(guī)則是從右往左開(kāi)始匹配，例如#markdown .content h3匹配規(guī)則如下：?

• 先找到h3標(biāo)簽元素?
• 然后去除祖先不是.content的元素?
• 最后去除祖先不是#markdown的元素?
  如果嵌套的層級(jí)更多，頁(yè)面中的元素更多，那么匹配所要花費(fèi)的時(shí)間代價(jià)自然更高?
• 所以我們?cè)诰帉?xiě)選擇器的時(shí)候，可以遵循以下規(guī)則：?
• 不要嵌套使用過(guò)多復(fù)雜選擇器，最好不要三層以上?
• 使用id選擇器就沒(méi)必要再進(jìn)行嵌套?
• 通配符和屬性選擇器效率最低，避免使用

減少使用昂貴的屬性?
在頁(yè)面發(fā)生重繪的時(shí)候，昂貴屬性如box-shadow/border-radius/filter/透明度/:nth-child等，會(huì)降低瀏覽器的渲染性能?
?
不要使用@import?
css樣式文件有兩種引入方式，一種是link元素，另一種是@import?
@import會(huì)影響瀏覽器的并行下載，使得頁(yè)面在加載時(shí)增加額外的延遲，增添了額外的往返耗時(shí)?
而且多個(gè)@import可能會(huì)導(dǎo)致下載順序紊亂?
比如一個(gè)css文件index.css包含了以下內(nèi)容：@import url(“reset.css”)?
那么瀏覽器就必須先把index.css下載、解析和執(zhí)行后，才下載、解析和執(zhí)行第二個(gè)文件reset.css

其他?

• 減少重排操作，以及減少不必要的重繪?
• 了解哪些屬性可以繼承而來(lái)，避免對(duì)這些屬性重復(fù)編寫(xiě)?
• cssSprite，合成所有icon圖片，用寬高加上backgroud-position的背景圖方式- 顯現(xiàn)出我們要的icon圖，減少了http請(qǐng)求?
• 把小的icon圖片轉(zhuǎn)成base64編碼?
• CSS3動(dòng)畫(huà)或者過(guò)渡盡量使用transform和opacity來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，不要使用left和top屬性

css實(shí)現(xiàn)性能的方式可以從選擇器嵌套、屬性特性、減少http這三面考慮，同時(shí)還要注意css代碼的加載順序