一圆裕、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檢查里面，點(diǎn)擊tran里面的cubic-bezier會出現(xiàn)下圖所示的樣式特愿，在這里我們可以把曲線弄成我們想要的樣式仲墨。圖形最上面的小球的運(yùn)動軌跡就是當(dāng)前我們調(diào)試的cubic-bezier曲線的運(yùn)動軌跡。然后將下面的數(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ù)值時，沿著順時針傾斜寡痰。