一、變形transform

1、傾斜skew()

skew(水平傾角,垂直傾角)

例如：

skew(20deg,30deg)

2、移動變形原點transform-origin

transform-origin:left/right/px/%  top/bottom/px/%;

例如：

transform-origin:left top;

相當于

transform-origin:0 0;

！注意所有變形transform并不會影響周圍其他元素

二、過度transition

1、動畫變換速率transition-timing-function

transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier()

說明：

linear：勻速過度

ease：慢—快—慢

ease-in：開始慢

ease-out：結束慢

ease-in-out：開始慢，結束慢

cubic-bezier()：貝塞爾曲線，曲線形狀代表路徑，曲線陡峭平緩代表速度快慢

可以訪問http://cubic-bezier.com/手動調試

2、延遲開始過渡

transition-delay:xxxs;

3、簡寫

transition:

transition-PRoperty transition-duration transition-timing-function transition-delay;

說明：

transition-property：CSS屬性/all（所有屬性）

transition-duration：持續時間

例如：

transition:all 1s ease-in .5s;

三、動畫animation

1、定義關鍵幀

@keyframes animation-name {

    form{

        css起始屬性

}

to{

        css最終屬性

    }

}

2、簡寫

animation:

animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode;

說明：

animation-name：動畫名

animation-duration：動畫持續時間

animation-timing-function：同transition-timing-function

animation-iteration-count：動畫運行次數，num/infinite（永久）

animation-direction：

動畫多次運行時，設置值alternate可奇數次正向播放，偶數次反向播放

animation-delay：延遲時間

animation-fill-mode：設置元素在動畫完成后的樣子，backward/forward/both

    backward：元素退回動畫前的樣子

    forward：元素顯示成動畫完成后的樣子

    both：元素顯示成動畫前后的樣子

3、手動暫停/開啟動畫

animation-play-state:running/paused;

四、讓動畫更流暢

動畫會占用大量CPU，導致設備運行卡

以下過度不會占用過多CPU：

（1）透明度。

（2）transition:translate/scale/rotate。

（3）transform:translateZ(0)設置3D屬性，但元素外觀無變化，騙過瀏覽器，強制設備開啟GPU，幫助渲染，但不能使用過多，使GPU占用過大。