CSS中的變形
transform
transform屬性是靜態(tài)屬性，不是動畫，寫到style里，立馬顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形；
- translate3d(x,y,z): 是用來控制元素的位置在頁面上的三軸的位置的,沿著某一個(gè)軸進(jìn)行位移
- rotate(deg):是用來控制元素旋轉(zhuǎn)角度的；
- skew[x,y](deg) 這個(gè)屬性是用來制作傾斜度的；
- scale([ratio]): 用來放大縮小效果，屬性是比值；
例：transform:scale(1.2)在原有的基礎(chǔ)上放大1.2倍 - matrix3d，css矩陣。通過這個(gè)矩陣屬性，涵蓋了上面所有的屬性值，可讀性極差（全都是數(shù)字和單位，背起來有點(diǎn)模糊，數(shù)學(xué)功底強(qiáng)的人可以研究），目前沒有理由推薦使用。
在不考慮兼容的情況下，建議盡量使用transform來實(shí)現(xiàn)一個(gè)元素的變形和位移（尤其是移動端開發(fā)的），因?yàn)樗跒g覽器解析的過程中，開啟了設(shè)備的硬件加速，性能和體驗(yàn)都是強(qiáng)于傳統(tǒng)的CSS樣式改變的；
transform不兼容IE低版本瀏覽器（IE9及以下）；
CSS3中的動畫
transition【過渡動畫】
transition:我們設(shè)置一個(gè)過渡的規(guī)則和效果，當(dāng)元素的樣式發(fā)生改變的時(shí)候，就會按照這個(gè)規(guī)則來運(yùn)動
-webkit-transition: [property] [duration] [time-function] [delay]
[property]:設(shè)置元素的哪些樣式在改變后執(zhí)行這個(gè)過渡的規(guī)則，默認(rèn)是all，所有的樣式改變都會執(zhí)行這個(gè)規(guī)則，如果寫的是width，代表只有元素的寬度改變才會執(zhí)行這個(gè)規(guī)則
[duration]：設(shè)置動畫運(yùn)動的總時(shí)間，默認(rèn)0；
[time-function]：設(shè)置動畫運(yùn)動的方式，默認(rèn)是linear，除此之外還有ease、ease-in、ease-out、ease-in-out...
[delay]：設(shè)置延遲時(shí)間，默認(rèn)是0s，如果設(shè)置是1s，當(dāng)需要運(yùn)動的時(shí)候會等待1s后在執(zhí)行
[animation] 幀動畫
-webkit-animation：
[name]：動畫名稱,運(yùn)動軌跡(幀)的名字
[duration]：運(yùn)動時(shí)間
[timing-function]：運(yùn)動的方式
[delay]：延遲時(shí)間
[iteration-count]：運(yùn)動次數(shù) infinite無限次運(yùn)動
[fill-mode]：此屬性下有三個(gè)值：
- forwards：當(dāng)元素按照軌跡運(yùn)動完成后停留在最后一幀的位置,不設(shè)置默認(rèn)動畫完成后,元素立馬回到第一幀的位置
- backwards：如果本次動畫有延遲，那么在延遲等到的時(shí)間，元素始終處于第一幀的位置，不設(shè)置的話是處于當(dāng)前位置
- both：同時(shí)具備以上兩個(gè)特點(diǎn)（一般用這個(gè)）
設(shè)置運(yùn)動的軌跡(幀)
@-webkit-keyframes [name] {
from{ => 0% 開始幀位置
top:10px;
}
25%{
top:-30px;
}
50%{
top:50px;
}
...
to{ => 100% 結(jié)束幀位置
top:100px;
}}
=>真實(shí)項(xiàng)目中我們自己一般不寫多少幀軌跡，而是使用強(qiáng)大的 Animate.css 軌跡庫來實(shí)現(xiàn)我們的需求https://daneden.github.io/animate.css/
簡單對比兩個(gè)動畫運(yùn)用場景：
transition:
- 目標(biāo)位置和具體的運(yùn)動軌跡可以不固定，我們可以在js中動態(tài)的設(shè)置運(yùn)動的目標(biāo)位置，只要把元素的樣式發(fā)生改變，都會執(zhí)行對應(yīng)的過渡效果
- 只是一個(gè)簡單的從A到B的一個(gè)過程，不能設(shè)置復(fù)雜的運(yùn)動軌跡
animation:
- 可以設(shè)置復(fù)雜的運(yùn)動軌跡，但是需要提前指定好軌跡公式，不能再JS中動態(tài)的修改；
- 我們可以依托強(qiáng)大的開源的Animate.css中提供的軌跡，完成我們的業(yè)務(wù)需求
以上，如果不妥之處請指正！
