CSS3中動(dòng)畫(huà)屬性transform、transition和animation屬性的區(qū)別
我要評(píng)論Transform
在部分的test case當(dāng)中，每每演示transform屬性的，看起來(lái)好像都是帶動(dòng)畫(huà)。這使得小部分直覺(jué)化思維的人（包括我）認(rèn)為transform屬性是動(dòng)畫(huà)屬性。而恰恰相反，transform屬性是靜態(tài)屬性，一旦寫(xiě)到style里面，將會(huì)直接顯示作用，無(wú)任何變化過(guò)程。transform的主要用途是用來(lái)做元素的特殊變形，對(duì)于做設(shè)計(jì)的人來(lái)說(shuō)并不是很陌生，簡(jiǎn)單的來(lái)說(shuō)就是css 的圖形變形工具。
關(guān)于圖形變形的基礎(chǔ)條件當(dāng)中的原點(diǎn)設(shè)定，在css里面使用的是transform-origin來(lái)定義的。這個(gè)定義的原點(diǎn)應(yīng)該是該css作用的元素的左上角為0,0來(lái)計(jì)算的（有待研究）。其他的屬性則根據(jù)這個(gè)屬性來(lái)計(jì)算進(jìn)行計(jì)算。
關(guān)于圖形變化的模式，css3標(biāo)準(zhǔn)當(dāng)中transform-style來(lái)定義。默認(rèn)是flat，展現(xiàn)出來(lái)的是簡(jiǎn)單的效果。而preserve-3d則將空間呈現(xiàn)為3d模式。從正常的思維來(lái)說(shuō)，應(yīng)該只需要preserve-3d就好了，但是從謠傳“開(kāi)啟了perserve-3d就使用了GPU加速”來(lái)說(shuō)，這個(gè)屬性可能是為了降低系統(tǒng)消耗用的，畢竟3d比2d要多一個(gè)維度的計(jì)算。
如果需要使用3d模式，必須先指定style為3d，并在任意父元素上增加 perspective及 perspective-origin 來(lái)指定透視點(diǎn)。
具體的給設(shè)計(jì)師改變?cè)貥邮接玫膶傩詣t有以下五個(gè)：
1、translate3d(x,y,z) 是用來(lái)控制元素的位置在頁(yè)面上的三軸的位置的；
2、rotate(deg)是用來(lái)控制元素旋轉(zhuǎn)角度的；
3、skew[x,y](deg) 這個(gè)屬性是用來(lái)制作傾斜度的，做過(guò)設(shè)計(jì)的人可能會(huì)知道，這個(gè)是用來(lái)在2d里面創(chuàng)建3d透視圖的時(shí)候必須的屬性；
4、scale3d(x,y,z) 用來(lái)放大縮小效果，屬性是比值；
5、matrix3d，css矩陣。通過(guò)這個(gè)矩陣屬性，涵蓋了上面所有的屬性值，但是個(gè)人覺(jué)得可讀性極差（全都是數(shù)字和單位，背起來(lái)有點(diǎn)模糊），目前沒(méi)有理由推薦使用。
總體看來(lái) css transform的屬性和原來(lái)使用的left ，right ，top， bottom 的屬性從動(dòng)靜角度來(lái)說(shuō)沒(méi)有任何區(qū)別，因此使用的時(shí)候應(yīng)該將transform歸類到這類定位變形的靜態(tài)屬性里面。
Transition
transition屬性是一個(gè)簡(jiǎn)單的動(dòng)畫(huà)屬性，非常簡(jiǎn)單非常容易用?？梢哉f(shuō)它是animation的簡(jiǎn)化版本，是給普通做簡(jiǎn)單網(wǎng)頁(yè)特效用的。比如你有如下兩個(gè)樣式：
.position{
left:100px;
top:100px;
}
.animate{
-webkit-transition:left 0.5s ease-out;
left:500px;
top:500px;
}
其中animate的transition的屬性的意思說(shuō)：當(dāng)你的left屬性發(fā)生變化的時(shí)候，執(zhí)行動(dòng)畫(huà)效果（僅僅基于left的屬性變化，其他的屬性不會(huì)加入到動(dòng)畫(huà)變化里面去）；
首先你的元素的css為position。當(dāng)你將其cssList 增加 animate 或者替換position 為animate的時(shí)候，元素的屬性變化，觸發(fā)webkit-transition，以指定屬性變化前的值為起始值，變化后的屬性為結(jié)束值，執(zhí)行動(dòng)畫(huà)效果。這是一個(gè)簡(jiǎn)單的兩點(diǎn)變化過(guò)程，大大簡(jiǎn)化了animation屬性的復(fù)雜程度。
同時(shí)，如果在transition的動(dòng)畫(huà)當(dāng)中，屬性值有了新的變化，則會(huì)中斷當(dāng)前的動(dòng)畫(huà)執(zhí)行，并將中斷時(shí)的屬性值提供給新的動(dòng)畫(huà)作為起始值來(lái)計(jì)算新的動(dòng)畫(huà)效果。
我在css編寫(xiě)的時(shí)候，因?yàn)樽兓膶傩灾挥衪ransform一個(gè)，因此在transtion屬性里面指定響應(yīng)屬性為all，可以響應(yīng)并執(zhí)行元素所有屬性的變化動(dòng)畫(huà)（能做動(dòng)畫(huà)的屬性）。
Animation
在官方的Introduction上介紹這個(gè)屬性是transition屬性的擴(kuò)展。但是這個(gè)簡(jiǎn)單的介紹里面包含了不簡(jiǎn)單的東西：keyframes。
做過(guò)Flash動(dòng)畫(huà)的人都會(huì)知道，F(xiàn)lash里面有兩個(gè)基礎(chǔ)武器：時(shí)間軸和關(guān)鍵幀。而css keyframes的出現(xiàn)，則是提供了flash世界里面的這兩個(gè)屬性的合集?？匆粋€(gè)簡(jiǎn)單的 keyframes 的示例：
@keyframes 'wobble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.animate{
left:100px;
-webkit-animation:wobble 0.5s ease-out;
-webkit-animation-fill-mode:backwards;
}
上面這個(gè)代碼展示了一個(gè)keyframes 'wobble'，其中 0％ 代表在變化中不同時(shí)間點(diǎn)的屬性值，你可以較精確的控制動(dòng)畫(huà)變化中任何一個(gè)時(shí)間點(diǎn)的屬性效果。而animation則根據(jù)這個(gè)keyframes提供的屬性變化方式去計(jì)算元素動(dòng)畫(huà)當(dāng)中的屬性。與 transition 不同的是，keyframes提供更多的控制，尤其是時(shí)間軸的控制，這點(diǎn)讓css animation更加強(qiáng)大，使得flash的部分動(dòng)畫(huà)效果可以由css直接控制完成，而這一切，僅僅只需要幾行代碼，也因此誕生了大量（比起flash來(lái)說(shuō)算是大量了）基于css的animation tools，用來(lái)取代flash的動(dòng)畫(huà)部分。關(guān)于動(dòng)畫(huà)工具，可以參考Web standards-based Animation Tools.
另外在animation屬性里面還有一個(gè)最重要的就是：animation-fill-mode，這個(gè)屬性標(biāo)示是以(from/0%)指定的樣式 還是以(to/100%)指定的樣式為動(dòng)畫(huà)完成之后的樣式。這個(gè)很方便我們控制動(dòng)畫(huà)的結(jié)尾樣式，保證動(dòng)畫(huà)的整體連貫。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望能對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助。
相關(guān)文章
解決CSS3 transition-delay 屬性默認(rèn)值0不帶單位失效的問(wèn)題
這篇文章主要介紹了解決CSS3 transition-delay 屬性默認(rèn)值0不帶單位失效的問(wèn)題,本文給大介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-29CSS3使用transition屬性實(shí)現(xiàn)過(guò)渡效果
CSS3中新增的transform屬性，可以實(shí)現(xiàn)元素在變換過(guò)程中的過(guò)渡效果，實(shí)現(xiàn)了基本的動(dòng)畫(huà)。下面通過(guò)本文給大家介紹CSS3使用transition屬性實(shí)現(xiàn)過(guò)渡效果，需要的朋友參考下本文2018-04-18
詳解css3 Transition屬性（平滑過(guò)渡菜單欄案例）
這篇文章主要介紹了詳解css3 Transition屬性（平滑過(guò)渡菜單欄案例）的相關(guān)資料,需要的朋友可以參考下2017-09-05CSS3與動(dòng)畫(huà)有關(guān)的屬性transition、animation、transform對(duì)比（史上最全
這篇文章主要介紹了CSS3與動(dòng)畫(huà)有關(guān)的屬性transition、animation、transform對(duì)比，通過(guò)瀏覽器兼容性，用法和對(duì)比更深刻的展示了彼此之間的異同，具體操作步驟大家可查看下文2017-08-18CSS3中的元素過(guò)渡屬性transition示例詳解
大家都知道過(guò)渡動(dòng)畫(huà)是動(dòng)畫(huà)的基礎(chǔ)，在學(xué)習(xí)動(dòng)畫(huà)屬性之前，我們需要先了解過(guò)渡屬性transition，下面這篇文章通過(guò)示例代碼給大家詳細(xì)介紹了CSS3中的元素過(guò)渡屬性transition，有2016-11-30
css3中通過(guò)transition屬性可以實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫(huà)過(guò)渡效果，今天通過(guò)本文給大家介紹下css3中transition屬性的示例代碼，感興趣的朋友跟隨小編一起看看吧2022-02-18
