CSS3中的 transition，transform，translate之間區(qū)別是什么

這篇文章主要介紹了CSS3中的 transition，transform，translate之間區(qū)別是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

transform 和 translate

transform指變換、變形，是css3的一個(gè)屬性，和其他width，height屬性一樣

translate 是transform的屬性值，是指元素進(jìn)行2D變換，2D變換就是指，元素以當(dāng)前位置（0,0）按照x軸的方向移動(dòng)多少，按照y軸的方向移動(dòng)多少

例如：

transform：translate(0,100%) 表示從元素的當(dāng)前位置延y軸方向，向下移動(dòng)整個(gè)元素高度的距離

transform：translate(-20px,0) 表示從元素的當(dāng)前位置延x軸方向，向左移動(dòng)20px

transform 有很多其它屬性值，translate3D（3D變換）,scale（2D縮放）等其他的變換方式。

transition 

transition  在一定時(shí)間之內(nèi)，一組css屬性變換到另一組屬性的動(dòng)畫(huà)展示過(guò)程?？梢杂脕?lái)實(shí)現(xiàn)動(dòng)態(tài)效果，css3的屬性

語(yǔ)法 transition：需要變換的屬性 變換需要的時(shí)間 控制動(dòng)畫(huà)速度變化 延期多少時(shí)間后開(kāi)始執(zhí)行

transition屬性寫(xiě)在最初的樣式里，而不是放在結(jié)束的樣式里，即定義動(dòng)畫(huà)開(kāi)始之前的元素外觀的樣式。只需要給元素設(shè)置一次transition，瀏覽器就會(huì)負(fù)責(zé)以動(dòng)畫(huà)展示從一個(gè)樣式到另一個(gè)樣式。

例如：

transition:width 2s;

transition:translate 2s;

transtion:all 2s。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中的 transition，transform，translate之間區(qū)別是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!