用css3實(shí)現(xiàn)轉(zhuǎn)換過渡和動(dòng)畫效果
我要評(píng)論為什么要用css動(dòng)畫替換js動(dòng)畫
導(dǎo)致JavaScript效率低的兩大原因：操作DOM和使用頁(yè)面動(dòng)畫。
通常我們會(huì)通過頻繁的操作 DOM的CSS來(lái)實(shí)現(xiàn)視覺上的動(dòng)畫效果，導(dǎo)致js效率低的兩個(gè)因素都包括在內(nèi)了在頻繁的操作DOM和CSS時(shí)，瀏覽器會(huì)不停的執(zhí)行重排和重繪，在PC版本的瀏覽器中，因?yàn)闉g覽器可用的內(nèi)存比較大，用戶肉眼幾乎看不見頁(yè)面動(dòng)畫產(chǎn)生的repaint和reflow，所以工程師幾乎無(wú)需過多的考慮動(dòng)畫帶來(lái)的性能問題，但在移動(dòng)設(shè)備上可大有不同，移動(dòng)設(shè)備分配給內(nèi)置瀏覽器的內(nèi)存可沒有PC版本的瀏覽器內(nèi)存可觀，目前對(duì)CSS3支持最好的莫過于webkit瀏覽器了，在webkit內(nèi)核的瀏覽器，一是safari其次是chrome.
用CSS3動(dòng)畫替代JS模擬動(dòng)畫的好處：
- 不占用JS主線程；
- 可以利用硬件加速；
- 瀏覽器可對(duì)動(dòng)畫做優(yōu)化（元素不可見時(shí)不動(dòng)畫減少對(duì)FPS影響）
CSS3動(dòng)畫提供了2D和3D以及常規(guī)動(dòng)畫屬性接口，它可以工作在頁(yè)面的任何一個(gè)元素的任意一個(gè)屬性，CSS3的動(dòng)畫是利用C語(yǔ)言編寫的，它是系統(tǒng)層面的動(dòng)畫。
采用js動(dòng)畫還是css3動(dòng)畫，需要開發(fā)者根據(jù)不同的需求做出不同的抉擇，但應(yīng)該遵循一個(gè)基本的原則是：如果你需要做2D動(dòng)畫，請(qǐng)勿必使用CSS3的transition或animation
CSS3動(dòng)畫與javascript模擬動(dòng)畫有以下區(qū)別：
- CSS 3D動(dòng)畫在js中無(wú)法實(shí)現(xiàn)
- CSS3的3D動(dòng)畫是CSS3中非常強(qiáng)大的功能，因?yàn)樗墓ぷ髟硎窃谝粋€(gè)三維的空間里，因此js是無(wú)法模擬出像CSS3那樣的3D動(dòng)畫
- CSS 2D矩陣動(dòng)畫效率高于js利用margin和left,top模擬的矩陣動(dòng)畫
- CSS3的2D動(dòng)畫是指是2D矩陣Transform變化，js當(dāng)然是不能做變形動(dòng)畫的。就拿坐標(biāo)動(dòng)畫來(lái)說(shuō)，使用CSS3的transform做translateXY動(dòng)畫比js中的position left，position right快了近700mm!而且視覺上也比js動(dòng)畫流暢很多。
- CSS3其它常規(guī)動(dòng)畫屬性的效率均低于js模擬的動(dòng)畫
- 常規(guī)動(dòng)畫屬性在這里是指：height，width,opacity,border-width,color
css3的屬性
2D 轉(zhuǎn)換
CSS3 轉(zhuǎn)換可以可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。
transform屬性，適用于2D或3D轉(zhuǎn)換的元素
transform-origin屬性，設(shè)置轉(zhuǎn)化元素位置
1.translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)?！?/p>
div {
transform: translate(50px,100px);
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
2.rotate()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。
div {
transform: rotate(30deg);
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
3.scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)
div {
-webkit-transform: scale(2,3); /* Safari /
transform: scale(2,3); / 標(biāo)準(zhǔn)語(yǔ)法 */
}
4.skew( [,])包含兩個(gè)參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 /
-webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}
3D 轉(zhuǎn)換
translate3d(x,y,z) 定義 3D 轉(zhuǎn)化。 translateX(x) 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。 translateY(y) 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。 translateZ(z) 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。 scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。 scaleX(x) 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) X 軸的值。 scaleY(y) 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Y 軸的值。 scaleZ(z) 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Z 軸的值。 rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。 rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。 rotateY(angle) 定義沿 Y 軸的 3D 旋轉(zhuǎn)。 rotateZ(angle) 定義沿 Z 軸的 3D 旋轉(zhuǎn)。 perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖。
CSS3 過渡
transition 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。transition-duration: 5s;
transition-timing-function 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。
linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
transition-delay 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。transition-delay: 2s;
CSS3 動(dòng)畫
@keyframes 規(guī)定動(dòng)畫。 animation 所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。 animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。 animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。 animation-fill-mode 規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。 animation-delay 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。 animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。
總結(jié)
以上所述是小編給大家介紹的用css3實(shí)現(xiàn)轉(zhuǎn)換過渡和動(dòng)畫效果,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果實(shí)例詳解
對(duì)于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對(duì)元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里，擴(kuò)展出了一個(gè)z軸，這個(gè)z軸垂直于屏幕并指向外面2017-05-02css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉(zhuǎn)換我覺的非常有意思，通過它我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或者拉伸，所以希望在這里和大家分享一下。有需要的朋2016-12-23CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時(shí)提到了關(guān)于瀏覽器的支持問題,需要的朋友可以參考下2015-08-04
css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果
這篇文章主要介紹了css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來(lái)的2D轉(zhuǎn)換而來(lái)，與2D轉(zhuǎn)換的功能相似，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-02-18
