一、transition過渡
? ? 1.1、transition-property：all;
? ? ? ? ? ? ?指定可以過渡的屬性值，默認(rèn)的值為all.當(dāng)然我們也可以設(shè)置具體的值。例如：transition-property: width；指該元素的width是要過渡的屬性，我們也可以設(shè)置多個屬性。transition-property：width，height；多個屬性之間用逗號隔開。
? ? 1.2、transition-duration：0s;
? ? ? ? ? ? ?指屬性過度所需要的時間，單位是秒，其默認(rèn)值是0s；結(jié)合1.1可知，transition-property：width；transition-duration：2s；表示該元素的寬度過渡所需要的時間為2s。
? ? 1.3、transition-timing-function：ease；
? ? ? ? ? ? ?過渡動畫的類型。默認(rèn)值為ease。當(dāng)然transition-timing-function的屬性不知這么多。如下圖所示，ease：表示先慢-快-慢，linear：表示勻速進(jìn)行，ease-in：表示先快-慢，ease-out：表示先慢-快，ease-in-out：表示先慢-快-慢。
? ? ? ? ? ? ? 最最關(guān)鍵的有一個cubic-bezier曲線，在Chrome檢查里面，點擊tran里面的cubic-bezier會出現(xiàn)下圖所示的樣式，在這里我們可以把曲線弄成我們想要的樣式。圖形最上面的小球的運動軌跡就是當(dāng)前我們調(diào)試的cubic-bezier曲線的運動軌跡。然后將下面的數(shù)值復(fù)制到我們的代碼中就可以了。
二、transform變形
? ? 2.1、transform：translate（）；位移或者變形。
? ? ? ? ? ?2.1.1、transform：translateX（length）；表示當(dāng)前元素沿著X軸移動length長度的距離。當(dāng)length為正值時表示沿著X軸正方形移動，length為負(fù)值時表示沿著X軸的負(fù)方向移動。
? ? ? ? ? 2.1.2、transform：translateY （length）；表示當(dāng)前元素沿著 Y軸移動length長度的距離。當(dāng)length為正值時表示沿著 Y軸正方形移動，length為負(fù)值時表示沿著 Y軸的負(fù)方向移動。
? ? ? ? ? 2.1.3、transform：translate （length，length）；表示當(dāng)前元素沿著 X，Y軸移動length長度的距離。當(dāng)length為正值時表示沿著X,Y軸正方形移動，length為負(fù)值時表示沿著X,Y軸的負(fù)方向移動。注意：當(dāng)transform：translate （length）；只有一個值時，默認(rèn)表示在X軸上移動。
? ? 2.2、transform: scale（）；縮放（適應(yīng)于設(shè)置小于12px的字體大小）
? ? ? ? ? 2.2.1、transform: scaleX（數(shù)值）；表示在X軸方向上進(jìn)行縮放。數(shù)值可以是整數(shù)可以是負(fù)值，當(dāng)然也可以是小數(shù)。默認(rèn)值為1；
? ? ? ? ? 2.2.2、transform: scale Y（數(shù)值）；表示在 Y軸方向上進(jìn)行縮放。數(shù)值可以是整數(shù)可以是負(fù)值，當(dāng)然也可以是小數(shù)。默認(rèn)值為1；
? ? ? ? ? 2.2.3、transform: scale（數(shù)值，數(shù)值）；表示在X，Y軸方向上進(jìn)行縮放。數(shù)值可以是整數(shù)可以是負(fù)值，當(dāng)然也可以是小數(shù)。默認(rèn)值為1；與tran所不同的是，scale設(shè)置一個屬性值時，表示X軸Y軸上都生效。
? ? 2.3、transform：rotate（）旋轉(zhuǎn)
? ? ? ? ? 2.3.1、transform：rotateX（deg）；表示該元素在X軸上進(jìn)行旋轉(zhuǎn)，當(dāng)deg為正時，代表沿著順時針旋轉(zhuǎn)，為負(fù)值使表示逆時針旋轉(zhuǎn)。
? ? ? ? ? 2.3.2、transform：rotate Y（deg）；表示該元素在 Y軸上進(jìn)行旋轉(zhuǎn)，當(dāng)deg為正時，代表沿著順時針旋轉(zhuǎn)，為負(fù)值使表示逆時針旋轉(zhuǎn)。
? ? ? ? ? 2.3.3、transform：rotate（deg）；表示該元素在 Z軸上進(jìn)行旋轉(zhuǎn)，當(dāng)deg為正時，代表沿著順時針旋轉(zhuǎn)，為負(fù)值使表示逆時針旋轉(zhuǎn)。
? ? 2.4、transform：skew() 傾斜 （適應(yīng)于制作平行四邊形）
? ? ? ? ? 2.4.1、transform：skewX（deg）；表示該元素沿著X軸進(jìn)行傾斜，當(dāng)deg為正值時，會逆時針傾斜，為負(fù)值時，沿著順時針傾斜。
? ? ? ? ? 2.4.1、transform：skew Y（deg）；表示該元素沿著 Y軸進(jìn)行傾斜，當(dāng)deg為正值時，會逆時針傾斜，為負(fù)值時，沿著順時針傾斜。
? ? ? ? ? 2.4.1、transform：skew （deg,deg）；表示該元素沿著X軸 Y軸進(jìn)行傾斜，當(dāng)deg為正值時，會逆時針傾斜，為負(fù)值時，沿著順時針傾斜。
