CSS中的動畫

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

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

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

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

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

<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;?}?/*簡寫*/?/*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)變動畫?
包含四個(gè)常用的功能：?

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

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

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

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

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

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

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

animation: rotate 2s;

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

每一個(gè)網(wǎng)頁都離不開css，但是很多人又認(rèn)為，css主要是用來完成頁面布局的，像一些細(xì)節(jié)或者優(yōu)化，就不需要怎么考慮，實(shí)際上這種想法是不正確的?
作為頁面渲染和內(nèi)容展現(xiàn)的重要環(huán)節(jié)，css影響著用戶對整個(gè)網(wǎng)站的第一體驗(yàn)?
因此，在整個(gè)產(chǎn)品研發(fā)過程中，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?
在打開一個(gè)頁面，頁面首要內(nèi)容出現(xiàn)在屏幕的時(shí)間影響著用戶的體驗(yàn)，而通過內(nèi)聯(lián)css關(guān)鍵代碼能夠使瀏覽器在下載完html后就能立刻渲染?
而如果外部引用css代碼，在解析html結(jié)構(gòu)過程中遇到外部css文件，才會開始下載css代碼，再渲染?
所以，CSS內(nèi)聯(lián)使用使渲染時(shí)間提前?
注意：但是較大的css代碼并不合適內(nèi)聯(lián)（初始擁塞窗口、沒有緩存），而其余代碼則采取外部引用方式

異步加載CSS?
在CSS文件請求、下載、解析完成之前，CSS會阻塞渲染，瀏覽器將不會渲染任何已處理的內(nèi)容?
前面加載內(nèi)聯(lián)代碼后，后面的外部引用css則沒必要阻塞瀏覽器渲染。這時(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，瀏覽器會認(rèn)為當(dāng)前樣式表不適用當(dāng)前類型，會在不阻塞頁面渲染的情況下再進(jìn)行下載。加載完成后，將media的值設(shè)為screen或all，從而讓瀏覽器開始解析CSS

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

通過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ī)則是從右往左開始匹配，例如#markdown .content h3匹配規(guī)則如下：?

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

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

其他?

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

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