一圆裕、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ù)值時,沿著順時針傾斜寡痰。