- - - >>>動(dòng)畫效果設(shè)定：動(dòng)畫結(jié)束后都會(huì)回歸原來的狀態(tài)妖碉；
- - - >>>transition、animation芥被、transform系列屬性欧宜，底層實(shí)現(xiàn)利用的都是matrix矩陣(其是一種數(shù)據(jù)結(jié)構(gòu)[以什么樣的形式存儲(chǔ)數(shù)據(jù)]) ->后期可深入學(xué)習(xí)哈~
1、transition過渡動(dòng)畫 ->?開發(fā)中一般都直接寫 transition: all 2s linear 4s; ->聚焦點(diǎn)：起拴魄、始狀態(tài)冗茸；并非所有屬性都可進(jìn)行動(dòng)畫過渡猛拴，例如display:none,display:block;就不可以；
transition過渡動(dòng)畫可參與過渡的屬性 ->查看“css參考手冊(cè)”中屬性的動(dòng)畫性
transition中的過渡函數(shù)：linear/ease常用 ->也可以直接寫cubic-bezier();貝塞爾曲線
2蚀狰、 animation動(dòng)畫(關(guān)鍵幀動(dòng)畫)->其可以有中間狀態(tài)愉昆； transform->起始、終止?fàn)顟B(tài)麻蹋；? ? ? @keyframes xx{};//關(guān)鍵幀容器 ->必須設(shè)置在css樣式中 ->同個(gè)動(dòng)畫可引入多個(gè)跛溉，以逗號(hào)相連即可；? animation: name time func delay direction count mode;//7個(gè)復(fù)合屬性扮授，animation-play-state屬性的設(shè)置往往結(jié)合事件使用芳室；-> animation屬性的設(shè)定在很多場(chǎng)景中都是單獨(dú)進(jìn)行“屬性設(shè)置”的；? ? ? ? ? ??
補(bǔ)充：animation-timing-function: steps(1,end);//默認(rèn)值start刹勃；有三種寫法：? ? ? ? ? ? ? ? ? ? ? ? ? steps(1,end);?等同于 step-end;//end保留當(dāng)前幀狀態(tài)堪侯，直到這段動(dòng)畫時(shí)間結(jié)束；? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? steps(1,start);?等同于 step-start;//start保留下一幀狀態(tài)荔仁，直到這段動(dòng)畫時(shí)間結(jié)束伍宦；? ? ? ? ? ? ? ?
- - - >>其有很多應(yīng)用場(chǎng)景："鐘表"效果、“跑馬”效果乏梁、"打印"效果
3次洼、transform: rotatex();rotatey();rotatez();rotate3d(x,y,z,30deg);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? transform: scale(x,y);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? transform: skew(x,y);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? transform: translatex();translatey();translatez();translate3d(x,y,z);//以上x,y大小寫皆可
transform-origin: center center;//設(shè)置變換中心，其中心點(diǎn)默認(rèn)居于元素x軸和y軸的50%處 ->其也可以寫空間值：transform-origin: 100px 100px 100px;
元素左頂點(diǎn)為坐標(biāo)原點(diǎn)位置
4遇骑、3D轉(zhuǎn)換：
景深聚焦點(diǎn) ->?設(shè)置translateZ();否則景深設(shè)置多少都不會(huì)變化卖毁，其投影到屏幕上就那么大；
5落萎、CSS3動(dòng)畫性能優(yōu)化 -> 關(guān)鍵還是尋找“平衡點(diǎn)”
補(bǔ)充：
(1).日常開發(fā)中經(jīng)常腳本化CSS：若涉及大量操作ele.style.xx;建議進(jìn)行class樣式整體操作亥啦，然后操作該class類名即可 ->減少重繪、重排的次數(shù)练链；
(2).GPU(圖形處理器)加速 ->標(biāo)準(zhǔn)方法will-change;//高版本谷歌瀏覽器才支持
瀏覽器渲染/刷新頁(yè)面的頻率大約為16.7ms(1s渲染60次); GPU可在每一幀里渲染好頁(yè)面翔脱，當(dāng)改動(dòng)頁(yè)面的元素或者實(shí)現(xiàn)動(dòng)畫的時(shí)候，將會(huì)非常流暢兑宇；
