目錄概覽：
- transition
- animation
- 常見CSS動(dòng)畫庫
- 動(dòng)畫性能優(yōu)化
一、transition
概述
transform 本意是變形堂鲤，變換之意亿傅，在 CSS 中使用該屬性可對元素進(jìn)行移動(dòng)（translate）、旋轉(zhuǎn)（rotate）瘟栖、縮放（scale）葵擎、傾斜（skew）等效果。因其有著各種特效及優(yōu)良的性能半哟，所以成為動(dòng)畫的標(biāo)配坪蚁。
在學(xué)習(xí)之前，我們可以簡單欣賞下幾個(gè)案例：
二維（2D）變換
translate
其語法為：transform: translate(tx[, ty])镜沽。其中 tx 表示 x 方向偏移敏晤，ty 表示 y 方向偏移，如果 ty 沒有指定值則為0缅茉。
還可以分拆為：transform: translateX(tx) 或 transform: translateY(ty)嘴脾。
簡單示例如下（虛線框表示原先位置）：
.box {
transform: translate(50px, 30px);
}
[圖片上傳失敗...(image-76ce1d-1547687082749)]
注：tx，ty 如果為百分比值的話蔬墩，其參考計(jì)算的是元素本身的寬和高译打，而不是父元素的寬和高。所以經(jīng)常使用該方法設(shè)置定位居中拇颅，代碼如下：
.demo {
position: absolute;
top: 50%; /* 父元素高度的一半位置 */
left: 50%; /* 父元素寬度的一半位置 */
transform: translate(-50%, -50%); /* 元素本身的一半寬奏司、高 */
}
scale
其語法為：transform: scale(sx[, sy])。其中 sx 表示 x 方向的縮放比例樟插，sy 表示 y 方向的縮放比例韵洋，如果 sy 沒有指定值則與 sx 相等。
同樣也可以分拆為：transform: scaleX(sx) 和 transform: scaleY(sy)
簡單示例如下：
.box {
transform: scale(1.2);
}
[圖片上傳失敗...(image-a21737-1547687082749)]
rotate
其語法為：transform: rotate(angle)黄锤。angle 表示順時(shí)針角度搪缨。
簡單示例如下：
.box {
transform: rotate(15deg);
}
[圖片上傳失敗...(image-5019af-1547687082748)]
skew
其語法為：transform: skew(ax[, ay])。其中 ax 表示 x 方向的順時(shí)針角度鸵熟，ay 表示 y 方向的順時(shí)針角度副编，如果 ay 沒有指定值則 y 方向沒有傾斜。
簡單示例如下：
.box {
transform: skew(30deg);
}
[圖片上傳失敗...(image-afcd62-1547687082748)]
復(fù)合變換
上面幾個(gè)變換流强，都可以自由組合形成更復(fù)雜的復(fù)合變換痹届。
簡單示例如下：
.box {
transform: translate(30px) rotate(10deg) skew(0, 5deg);
}
[圖片上傳失敗...(image-401ba8-1547687082748)]
以上所有示例在線查看地址： transform 簡單 demo
變換中心點(diǎn)
默認(rèn)上面所有的變換都是以元素的中心位置為參考原點(diǎn)的呻待，不過我們可以通過屬性 transform-origin 來改變參考原點(diǎn)。
其語法為：transform-origin: ox oy队腐。其中 ox 表示 x 方向的位置蚕捉，可使用 left、right香到、center鱼冀、<length>、<percentage>悠就，oy 表示 y 方向的位置千绪，可使用top、bottom梗脾、center荸型、<length>、<percentage>炸茧。如果只傳入一個(gè)值瑞妇，則另一個(gè)值默認(rèn)為 50%
簡單示例如下（在線 demo）：
.box {
transform: rotate(15deg);
}
.box-origin-top-left {
transform-origin: left top;
}
.box-origin-right {
transform-origin: right; /* 設(shè)置一個(gè)值，則另一個(gè)為50% */
}
.box-origin-px {
transform-origin: 200px 80%;
}
[圖片上傳失敗...(image-797765-1547687082748)]
[圖片上傳失敗...(image-ca724d-1547687082748)]
[圖片上傳失敗...(image-f038c7-1547687082748)]
trasform 2D 的本質(zhì) —— 矩陣變換
上面我們已經(jīng)簡單了解了 transform 2D 的基本語法梭冠，接下來簡單探討下 transform 2D 的本質(zhì)辕狰。
transform 2D 除了以上的四種基本語法（translate、rotate控漠、scale蔓倍、skew）外，還有一個(gè)矩陣語法盐捷，如下：
transform: matrix(a, b, c, d, e, f);
上面 matrix(a, b, c, d, e, f) 的形式用矩陣符號表示偶翅，是這樣的：
[圖片上傳失敗...(image-85b08e-1547687082748)]
需要注意的是，第三行是固定的碉渡，都是 0,0,1 聚谁，所以 CSS 語法中省去了這一行。因?yàn)樯婕暗?x滞诺、y 及旋轉(zhuǎn)形导，所以二維變換需要三個(gè)變量來表示。
下面我們具體以實(shí)例了解下矩陣是如何用來表示變換的铭段，以上面的 translate 為例：
.box {
transform: translate(50px, 30px);
}
上面 css 代碼的意思是說骤宣，把所有點(diǎn)都相對于 原點(diǎn) （通過 transform-origin 指定，默認(rèn)為中心點(diǎn)）序愚，往 x 正方向平移 50px，往 y 正方向平移 30px等限。用數(shù)學(xué)表達(dá)式表示就是：
[圖片上傳失敗...(image-e06a5b-1547687082747)]
這里 tx = 50px 爸吮，ty = 30px芬膝。稍微變換一下，x' 和 x形娇，y 都相關(guān)锰霜，寫成如下的形式：
[圖片上傳失敗...(image-76f482-1547687082747)]
把兩行的x、y系數(shù)取出來桐早，再補(bǔ)充一行（為什么多了一行癣缅？為了運(yùn)算方便，看下圖也許就清楚了）哄酝，得下面的語法形式—— 矩陣運(yùn)算：
[圖片上傳失敗...(image-93e4ad-1547687082747)]
那么友存，變換的本質(zhì)是什么？就是把一組 (x, y) 通過算術(shù)運(yùn)算陶衅，變?yōu)樾碌淖鴺?biāo) (x',y') 屡立，剛好 矩陣 這種數(shù)學(xué)工具就可以用來描述這種數(shù)學(xué)變換。通用的二維矩陣變換就是：
[圖片上傳失敗...(image-650dc4-1547687082746)]
常見的二維變換
上面公式的最左邊的矩陣搀军，通常是如下幾種基本形式組合而成：
[圖片上傳失敗...(image-581a6c-1547687082746)]
如果每個(gè)變換膨俐，都用 matrix 語法來表示，要寫很多參數(shù)罩句，顯然這樣是不合理的焚刺。所以有了四個(gè)基本的簡化寫法：
[圖片上傳失敗...(image-b423a5-1547687082746)]
三維（3D）變換
3D 變換大概有如下幾種使用方法：
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
3D 變換的復(fù)雜性及可以創(chuàng)造的特效遠(yuǎn)超 2D 變換。由于篇幅有限且深入掌握的話需要一定的想象力门烂，這里就做不詳細(xì)介紹了乳愉。
推薦兩篇高質(zhì)量入門文章如下：
參考資料
- CSS3 Transform
- Advanced CSS3 2D and 3D Transform Techniques
- transform | MDN
- 深入淺出CSS Transform
- 線性代數(shù)拾遺（三）：線性變換以及矩陣的意義
- 理解CSS3 transform中的Matrix(矩陣)
- understanding-the-css-transforms-matrix
- transformmatrix
- css3-matrix-transform-for-the-mathematically-challenged
二、animation
三诅福、常見 CSS 動(dòng)畫庫
自從 CSS3 有了動(dòng)畫功能匾委，從此 Web 頁面就邁進(jìn)“忽如一夜春風(fēng)來，千頁萬頁動(dòng)畫開”的盛況氓润。 所以 CSS 動(dòng)畫除了是炫技之選更是一項(xiàng)基本技能赂乐，當(dāng)然也就有無數(shù)前輩為之嘔心瀝血總結(jié)經(jīng)驗(yàn)了。這里我們站在巨人肩上咖气，為大家推薦一些常見且十分好用的 CSS 動(dòng)畫庫挨措，既可以用來學(xué)習(xí)也可用來提高工作效率。
Animate.css
Animate.css 是最早的也是目前最流行和最易于使用的CSS動(dòng)畫庫之一崩溪，其包含了60多款不同類型的 CSS 動(dòng)畫如晃動(dòng)浅役、閃動(dòng)、淡出淡出效果等伶唯，如果你想快速的使用各種 CSS 動(dòng)畫特效的話觉既，你可以選擇它。
- 創(chuàng)作者：Daniel Eden
- 發(fā)行：2013年
- 當(dāng)前版本：3.5.2
- 人氣：GitHub上有40000+的star
- 未壓縮大小：72kB
- GitHub：https://github.com/daneden/animate.css
[圖片上傳失敗...(image-94f1dd-1547687274155)]
Magic CSS3 Animation
Magic CSS3 Animations 是一個(gè)特殊效果的 CSS 動(dòng)畫庫瞪讼，你可以免費(fèi)用于你的 Web 項(xiàng)目钧椰，簡單的引用 CSS 樣式：magic.css 或 magic.min.css （壓縮版）即可。該項(xiàng)目提供了一個(gè)特別酷的演示應(yīng)用程序符欠。與 animate.css 相比嫡霞，Magic CSS3 Animation 的大小適中，它的特色動(dòng)畫希柿，如魔法效果诊沪，愚蠢的效果和炸彈效果十分出眾和特別。
- 創(chuàng)作者：Christian
- 發(fā)行：2014年
- 當(dāng)前版本：1.1.0
- 人氣：GitHub上有4700+的star
- 未壓縮大性贰：20.5kb
- GitHub：https://github.com/miniMAC/magic
[圖片上傳失敗...(image-68b0c7-1547687274153)]
Hover CSS
Hover.css 是一個(gè) CSS 動(dòng)畫庫端姚，專為您的網(wǎng)站中的按鈕和其他 UI 元素而設(shè)計(jì)。它具有非常好的2D轉(zhuǎn)換盾戴，以及許多其他精心制作的動(dòng)畫寄锐。
- 創(chuàng)作者： Ian Lunn
- 發(fā)行：2013年
- 當(dāng)前版本：2.1.1
- 人氣：GitHub上有16000+的star
- 未壓縮大小：100+kb
- GitHub：https://github.com/IanLunn/Hover
[圖片上傳失敗...(image-a99e-1547687274152)]
Effeckt
Effeckt.css 是一個(gè)集合了眾多新鮮而又實(shí)用的的 CSS/jQuery 動(dòng)畫效果尖啡，這些都適用于網(wǎng)站或是移動(dòng) APP 的網(wǎng)頁橄仆，比如一些 AJAX 彈出框動(dòng)畫、菜單動(dòng)畫衅斩、圖片標(biāo)題展示等等盆顾，這些特效動(dòng)畫都能給你的網(wǎng)站提升一定用戶體驗(yàn)，而且簡單實(shí)用畏梆。
- 創(chuàng)作者：paulirish
- 發(fā)行：2013年
- 當(dāng)前版本：0.5.0
- 人氣：GitHub上有10900+的star
- GitHub：https://github.com/h5bp/Effeckt.css
[圖片上傳失敗...(image-e8ab06-1547687274152)]
Single Element CSS Spinners
在頁面中您宪，我們時(shí)常需要使用 gif 圖片來實(shí)現(xiàn)比較炫酷的 loading 動(dòng)畫。Single Element CSS Spinners是一個(gè)CSS螺旋加載動(dòng)畫的集合奠涌。使用Single Element CSS Spinners 來替代 gif 來實(shí)現(xiàn)螺旋加載動(dòng)畫宪巨，不僅減少了請求圖片的次數(shù)，同時(shí)還能夠通過代碼來靈活地修改動(dòng)畫的參數(shù)溜畅。
- 創(chuàng)作者：Lukehaas
- 發(fā)行：2014年
- 當(dāng)前版本：1.0.0
- 人氣：GitHub上有4700+的star
- 未壓縮大心笞俊：10kB
- GitHub：https://github.com/lukehaas/css-loaders
[圖片上傳失敗...(image-60cde5-1547687274150)]
注：一般不建議全部拿來使用，而是使用哪個(gè)動(dòng)畫效果就拷貝對應(yīng)的樣式慈格。
四怠晴、動(dòng)畫性能優(yōu)化
CSS3 動(dòng)畫給 Web 的用戶體驗(yàn)帶來了巨大提升，本文將嘗試從瀏覽器渲染的角度浴捆，來解析動(dòng)畫優(yōu)化的原理及其技巧蒜田。為大家提供一些動(dòng)畫性能優(yōu)化的參考。
60fps 與設(shè)備刷新率
目前大多數(shù)設(shè)備的屏幕刷新率為60fps（Frame per Second）选泻，即每秒60幀冲粤。因此美莫，如果在頁面中有一個(gè)動(dòng)畫或漸變效果，或者用戶正在滾動(dòng)頁面色解，那么瀏覽器渲染動(dòng)畫或頁面的每一幀的速率也需要跟設(shè)備屏幕的刷新率保持一致茂嗓，即每一幀要在16毫秒（1S/60 = 16.66ms）之內(nèi)完成餐茵。如果無法完成科阎，由于幀率的下降會(huì)導(dǎo)致內(nèi)容在屏幕上抖動(dòng)。 此現(xiàn)象通常稱為卡頓忿族，會(huì)對用戶體驗(yàn)產(chǎn)生負(fù)面影響锣笨。
瀏覽器渲染
在講性能之前，我們需要先對瀏覽器渲染頁面有一個(gè)基礎(chǔ)的理解道批。
CSS 圖層
瀏覽器在渲染一個(gè)頁面時(shí)错英，會(huì)將頁面分為很多個(gè)圖層，圖層有大有小隆豹，每個(gè)圖層上有一個(gè)或多個(gè)節(jié)點(diǎn)椭岩。需要注意的是，如果圖層中某個(gè)元素需要重繪璃赡，那么整個(gè)圖層都需要重繪（關(guān)于重繪下面會(huì)講到）判哥。
渲染過程
簡單來說，瀏覽器的渲染過程其實(shí)就是將頁面轉(zhuǎn)換成像素顯示到屏幕上碉考，大致有如下幾個(gè)步驟：
[圖片上傳失敗...(image-ea62b7-1547687322300)]
- Javascript操作： 一般來說塌计，我們會(huì)使用 JavaScript 來實(shí)現(xiàn)一些交互操作。比如用往頁面里添加一些元素侯谁，切換顯示隱藏等
- style 樣式計(jì)算： 該過程根據(jù) CSS 選擇器锌仅，獲取每個(gè)元素匹配的 CSS 樣式并計(jì)算其最終應(yīng)用樣式
- Layout 布局：該過程計(jì)算元素要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁的布局模式意味著一個(gè)元素可能影響其他元素墙贱，例如
<body>元素的寬度一般會(huì)影響其子元素的寬度以及樹中各處的節(jié)點(diǎn)热芹，因此對于瀏覽器來說，布局是經(jīng)常發(fā)生的 - Paint 繪制：本質(zhì)上就是填充像素的過程惨撇。包括繪制文字伊脓、顏色、圖像串纺、邊框和陰影等丽旅。也就是繪制元素所有的可視效果
- Composite 渲染層合并：在每個(gè)層上完成繪制過程之后，瀏覽器會(huì)將所有層按照合理的順序合并成一個(gè)圖層纺棺，然后顯示在屏幕上
如果我們需要提高動(dòng)畫的性能榄笙，需要做的就是減少瀏覽器在動(dòng)畫運(yùn)行時(shí)所需要做的工作。當(dāng) CSS 在進(jìn)行動(dòng)畫時(shí)祷蝌，其不同屬性值引起的改變茅撞，重新渲染可能會(huì)有三種執(zhí)行路徑：
- A：
layout -> paint -> composite - B：
paint -> composite - C：
composite
很明顯，最短路徑的 C 動(dòng)畫性能是最高的，所以我們在使用動(dòng)畫的時(shí)候就得考慮使用什么屬性米丘，以盡量減少執(zhí)行路徑剑令。
動(dòng)畫屬性
CSS 的屬性大致分為三類：布局類（layout），繪制類（paint）拄查，合成類（composite）吁津。
重排（reflow）
由元素的布局類屬性改變所觸發(fā)的行為過程，我們稱為 reflow堕扶，也叫做 relayout（重新布局）碍脏。當(dāng)某個(gè)節(jié)點(diǎn) reflow 時(shí)會(huì)重新計(jì)算節(jié)點(diǎn)的尺寸和位置，還可能會(huì)引起其它節(jié)點(diǎn)的 reflow稍算。
該系列屬性的改變典尾，會(huì)執(zhí)行路徑 A 進(jìn)行重新渲染，所以性能是最差的糊探。（這充分說明钾埂，重排會(huì)引起重繪）
觸發(fā)重排的屬性
盒子模型相關(guān)屬性會(huì)觸發(fā)重布局：
- width
- height
- padding
- margin
- display
- border-width
- border
- min-height
定位屬性及浮動(dòng)也會(huì)觸發(fā)重布局：
- top
- bottom
- left
- right
- position
- float
- clear
改變節(jié)點(diǎn)內(nèi)部文字結(jié)構(gòu)也會(huì)觸發(fā)重布局：
- text-align
- overflow-y
- font-weight
- overflow
- font-family
- line-height
- vertival-align
- white-space
- font-size
重繪（repaint）
由繪制類屬性改變觸發(fā)節(jié)點(diǎn)重新繪制其可視效果的過程，我們稱為 repaint科平。
該系列屬性的改變褥紫，會(huì)執(zhí)行路徑 B，所以性能一般匠抗。
觸發(fā)重繪的屬性
修改時(shí)只觸發(fā)重繪的屬性有：
- color
- border-style
- border-radius
- visibility
- text-decoration
- background
- background-image
- background-position
- background-repeat
- background-size
- outline-color
- outline
- outline-style
- outline-width
- box-shadow
上面的屬性由于不會(huì)修改節(jié)點(diǎn)的大小和位置故源，因此不會(huì)觸發(fā)重排，其只是改變了節(jié)點(diǎn)內(nèi)部的渲染效果汞贸，所以只會(huì)進(jìn)行重繪以下的步驟绳军。
composite
目前只有兩個(gè)屬性屬于 composite 類：
- transform
- opactiy
該系列屬性的改變，會(huì)執(zhí)行路徑 C矢腻，所以性能最佳门驾。
如果想了解更多 CSS 中會(huì)影響 Layout、Paint 和 Composite 的屬性多柑，可參考：CSS Triggers奶是。
優(yōu)化技巧
減少動(dòng)畫元素
減少動(dòng)畫元素，是動(dòng)畫性能優(yōu)化中首先需要完成的竣灌。通過審查頁面動(dòng)畫 DOM 元素結(jié)構(gòu)聂沙，去除不必要的動(dòng)畫元素，減少元素的數(shù)量初嘹，相應(yīng)地會(huì)減少布頁面局和繪制的時(shí)間及汉。
盡量使用 fixed、absolute 定位
對于動(dòng)畫元素屯烦，盡量使用用 fixed坷随、absolute 定位方式房铭，避免影響到其他節(jié)點(diǎn)重排。
盡量只改變transform和opacity
能用 transform温眉、opacity 優(yōu)先使用缸匪，其屬性的改變不會(huì)發(fā)生重排和重繪。如位移操作的类溢，可以使用translate 來實(shí)現(xiàn)凌蔬，漸隱漸現(xiàn)效果可以使用 opacity 屬性來實(shí)現(xiàn)。
恰當(dāng)開啟硬件加速效果
對動(dòng)畫元素應(yīng)用transform: translate3d(0, 0, 0)豌骏、will-change: transform 等來開啟硬件加速龟梦。通常開啟硬件加速可以讓動(dòng)畫變得更加流暢。但這里需注意窃躲，在不需要的時(shí)候需去掉避免過多的內(nèi)存消耗。
transform: translate3d(0, 0, 0);
transform: translateZ(0);
will-change: transform;
