tips:
- 同一個(gè)元素的動(dòng)畫(huà)書(shū)寫(xiě)順序?qū)τ趧?dòng)畫(huà)順序的影響有先后（旋轉(zhuǎn)角度影響方向）
- 使用translate的好處：
改變?cè)氐拇笮∥恢貌粫?huì)影響到其他元素的布局梦皮。
2D動(dòng)畫(huà)
不需透視和3d效果的動(dòng)畫(huà)嘉汰。
<style>
目標(biāo)元素{
transition:屬性A 時(shí)長(zhǎng)s 速度曲線 延遲s, 屬性B 時(shí)長(zhǎng)s 速度曲線 延遲s;
//其中何荚，曲線和延遲可以省略，只寫(xiě)屬性慰丛，時(shí)長(zhǎng)s
}
目標(biāo)元素:hover{
transform: 動(dòng)畫(huà)類(lèi)型(值);
//多個(gè)動(dòng)畫(huà)中間用空格隔開(kāi)
}
</style>
參數(shù)
trasition: 改變屬性，時(shí)長(zhǎng)s, 延遲s;
transform-orign：動(dòng)畫(huà)參考點(diǎn)/軸;
transform：動(dòng)畫(huà)種類(lèi)，值;
動(dòng)畫(huà)種類(lèi)_寫(xiě)在transform里
旋轉(zhuǎn)rotate(ndeg);
移動(dòng)translate(npx,npx);
縮放scale(0.n,0.n);
傾斜skew(ndeg)或skew(ndeg,ndeg);
翻頁(yè)回調(diào)函數(shù)動(dòng)畫(huà)（頁(yè)面加載后自執(zhí)行）
目前在fullscreen樣式的h5頁(yè)面中經(jīng)常用到。
- Step1 翻頁(yè)回調(diào)函數(shù)：先刪除所有頁(yè)的animate類(lèi)名孙蒙，再給當(dāng)前父盒加上animate類(lèi)名
- Step2動(dòng)畫(huà)元素不帶animate的樣式：把動(dòng)畫(huà)最終的呈現(xiàn)作為css的靜態(tài)值（直接修改樣式屬性值的除外）项棠，transform變化到起點(diǎn)，元素的起點(diǎn)和起始值寫(xiě)在transform中
- Step3 動(dòng)畫(huà)元素帶animate的樣式：transition設(shè)定動(dòng)畫(huà)時(shí)長(zhǎng)順序等马篮，transform通常設(shè)置為none（當(dāng)動(dòng)畫(huà)為旋轉(zhuǎn)沾乘、縮放、移動(dòng)等）浑测。
直接修改樣式屬性值的：
- 在不帶animate的選擇器中寫(xiě)起點(diǎn)樣式（給CSS的各屬性賦值）翅阵；
- 在帶animate的選擇器中寫(xiě)transition和終點(diǎn)樣式（改變后的CSS屬性和值）。
例如：
.section1 .info1 img {
margin: 0 10px; //動(dòng)畫(huà)開(kāi)始前有間距迁央、半透明
opacity: 0.2;
}
.section1.animate .info1 img {
margin: 0; //動(dòng)畫(huà)時(shí)長(zhǎng)1秒掷匠，1秒內(nèi)間距縮為0，透明度增加到100%
opacity: 1;
transition: all 1s;
}
動(dòng)畫(huà)為旋轉(zhuǎn)岖圈、縮放讹语、移動(dòng)等的：
- 在不帶animate的選擇器中先寫(xiě)終點(diǎn)樣式（屬性與值），然后再寫(xiě)transform蜂科，使得元素到達(dá)動(dòng)畫(huà)的起點(diǎn)（通常與想要呈現(xiàn)的動(dòng)畫(huà)方向相反顽决、值相同）。
- 在帶animate的選擇器中寫(xiě)transition导匣，transform為none才菠。這樣動(dòng)畫(huà)將會(huì)“倒放”。
例如：
.section2 .shield img:nth-child(3){
transform-origin: right bottom; //參考點(diǎn)
transform: rotate(180deg) translate(-30px, -80px); //“倒序”的動(dòng)畫(huà)語(yǔ)句
}
//最終呈現(xiàn)：以右下角為支點(diǎn)贡定，從右下方旋轉(zhuǎn)180度到上面
.section2.animate .shield img:nth-child(3){
transform: none;
transition: all 1s;
}
3D動(dòng)畫(huà)效果
打開(kāi)3d效果:
transform-style：preserve-3d;
視距（透視）赋访，對(duì)需要透視元素的父盒子添加:
perspective: npx;
參數(shù)
trasition: 改變屬性，時(shí)長(zhǎng)s, 延遲s;
transform：動(dòng)畫(huà)種類(lèi)缓待，值;
transform-orign：動(dòng)畫(huà)參考點(diǎn)/軸;
動(dòng)畫(huà)種類(lèi)_寫(xiě)在transform里
旋轉(zhuǎn)rotateX/Y/Z(ndeg);
移動(dòng)translateX/Y/Z(npx);
縮放scale(0.n,0.n);
傾斜skew(ndeg)或skew(ndeg,ndeg);
復(fù)雜keyframes劇本動(dòng)畫(huà)
兩個(gè)部分構(gòu)成：元素樣式中的ainimation語(yǔ)句蚓耽，和描述動(dòng)畫(huà)動(dòng)作的keyframes動(dòng)畫(huà)劇本。
注意：
非常容易在這里把animation語(yǔ)句寫(xiě)成transition旋炒，寫(xiě)成transition動(dòng)畫(huà)是不會(huì)動(dòng)的呢（石樂(lè)志）步悠。
ainimation語(yǔ)句
ainimation:動(dòng)畫(huà)名 單次時(shí)長(zhǎng) 次數(shù) 快慢效果 延遲時(shí)長(zhǎng) 最后幀狀態(tài);
keyframes 劇本
@keyframes 動(dòng)畫(huà)名{
0%{
轉(zhuǎn)折點(diǎn)屬性:參數(shù);
}
時(shí)間點(diǎn)%{
轉(zhuǎn)折點(diǎn)屬性:參數(shù);
}
時(shí)間點(diǎn)%{
轉(zhuǎn)折點(diǎn)屬性:參數(shù);
}
100%{
轉(zhuǎn)折點(diǎn)屬性:參數(shù);
}
}
2018.1.9
