這篇文章主要介紹了如何使用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比尼勒克網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式尼勒克網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋尼勒克地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

為什么要用css動(dòng)畫(huà)替換js動(dòng)畫(huà)  

導(dǎo)致JavaScript效率低的兩大原因：操作DOM和使用頁(yè)面動(dòng)畫(huà)。

通常我們會(huì)通過(guò)頻繁的操作 DOM的CSS來(lái)實(shí)現(xiàn)視覺(jué)上的動(dòng)畫(huà)效果，導(dǎo)致js效率低的兩個(gè)因素都包括在內(nèi)了在頻繁的操作DOM和CSS時(shí)，瀏覽器會(huì)不停的執(zhí)行重排和重繪，在PC版本的瀏覽器中，因?yàn)闉g覽器可用的內(nèi)存比較大，用戶肉眼幾乎看不見(jiàn)頁(yè)面動(dòng)畫(huà)產(chǎn)生的repaint和reflow，所以工程師幾乎無(wú)需過(guò)多的考慮動(dòng)畫(huà)帶來(lái)的性能問(wèn)題，但在移動(dòng)設(shè)備上可大有不同，移動(dòng)設(shè)備分配給內(nèi)置瀏覽器的內(nèi)存可沒(méi)有PC版本的瀏覽器內(nèi)存可觀，目前對(duì)CSS3支持最好的莫過(guò)于webkit瀏覽器了，在webkit內(nèi)核的瀏覽器，一是safari其次是chrome.  

用CSS3動(dòng)畫(huà)替代JS模擬動(dòng)畫(huà)的好處：

• 不占用JS主線程；

• 可以利用硬件加速；

• 瀏覽器可對(duì)動(dòng)畫(huà)做優(yōu)化（元素不可見(jiàn)時(shí)不動(dòng)畫(huà)減少對(duì)FPS影響）

CSS3動(dòng)畫(huà)提供了2D和3D以及常規(guī)動(dòng)畫(huà)屬性接口，它可以工作在頁(yè)面的任何一個(gè)元素的任意一個(gè)屬性，CSS3的動(dòng)畫(huà)是利用C語(yǔ)言編寫(xiě)的，它是系統(tǒng)層面的動(dòng)畫(huà)。

采用js動(dòng)畫(huà)還是css3動(dòng)畫(huà)，需要開(kāi)發(fā)者根據(jù)不同的需求做出不同的抉擇，但應(yīng)該遵循一個(gè)基本的原則是：如果你需要做2D動(dòng)畫(huà)，請(qǐng)勿必使用CSS3的transition或animation

CSS3動(dòng)畫(huà)與javascript模擬動(dòng)畫(huà)有以下區(qū)別：

• CSS 3D動(dòng)畫(huà)在js中無(wú)法實(shí)現(xiàn)

• CSS3的3D動(dòng)畫(huà)是CSS3中非常強(qiáng)大的功能，因?yàn)樗墓ぷ髟硎窃谝粋€(gè)三維的空間里，因此js是無(wú)法模擬出像CSS3那樣的3D動(dòng)畫(huà)

• CSS 2D矩陣動(dòng)畫(huà)效率高于js利用margin和left,top模擬的矩陣動(dòng)畫(huà)

• CSS3的2D動(dòng)畫(huà)是指是2D矩陣Transform變化，js當(dāng)然是不能做變形動(dòng)畫(huà)的。就拿坐標(biāo)動(dòng)畫(huà)來(lái)說(shuō)，使用CSS3的transform做translateXY動(dòng)畫(huà)比js中的position left，position right快了近700mm!而且視覺(jué)上也比js動(dòng)畫(huà)流暢很多。

• CSS3其它常規(guī)動(dòng)畫(huà)屬性的效率均低于js模擬的動(dòng)畫(huà)

• 常規(guī)動(dòng)畫(huà)屬性在這里是指：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)換，通過(guò)給定一個(gè) X 軸的值。
scaleY(y)    定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) Y 軸的值。
scaleZ(z)    定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(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 過(guò)渡

transition    簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。
transition-property    規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱。
transition-duration    定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。transition-duration: 5s;
transition-timing-function    規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。
    linear    規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
    ease    規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    ease-in    規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
    ease-out    規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    ease-in-out    規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    cubic-bezier(n,n,n,n)　　在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?nbsp;0 至 1 之間的數(shù)值。
transition-delay　　規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。transition-delay: 2s;

CSS3 動(dòng)畫(huà)

@keyframes    規(guī)定動(dòng)畫(huà)。    
animation    所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性。    
animation-name    規(guī)定 @keyframes 動(dòng)畫(huà)的名稱。    
animation-duration    規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。    
animation-timing-function    規(guī)定動(dòng)畫(huà)的速度曲線。默認(rèn)是 "ease"。    
animation-fill-mode    規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。    
animation-delay    　　規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。    
animation-iteration-count    規(guī)定動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。
animation-direction    規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"。
animation-play-state    規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞名稱：如何使用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果
文章起源：http://chinadenli.net/article6/ppccig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版、小程序開(kāi)發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)