CSS3中動畫屬性transform、transition和animation屬性的區(qū)別

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