如何使用css3實(shí)現(xiàn)轉(zhuǎn)換過渡和動畫效果

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

為什么要用css動畫替換js動畫  

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

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

用CSS3動畫替代JS模擬動畫的好處：

• 不占用JS主線程；

• 可以利用硬件加速；

• 瀏覽器可對動畫做優(yōu)化（元素不可見時不動畫減少對FPS影響）

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

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

CSS3動畫與javascript模擬動畫有以下區(qū)別：

• CSS 3D動畫在js中無法實(shí)現(xiàn)

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

• CSS 2D矩陣動畫效率高于js利用margin和left,top模擬的矩陣動畫

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

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

• 常規(guī)動畫屬性在這里是指：height，width,opacity,border-width,color

css3的屬性

2D 轉(zhuǎn)換

CSS3 轉(zhuǎn)換可以可以對元素進(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。  

transform屬性，適用于2D或3D轉(zhuǎn)換的元素  

transform-origin屬性，設(shè)置轉(zhuǎn)化元素位置

1.translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動?！?/p>

div {
　　transform: translate(50px,100px);
　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(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)語法 */
}

4.skew( [,])包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(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)換，通過給定一個 X 軸的值。
scaleY(y)    定義 3D 縮放轉(zhuǎn)換，通過給定一個 Y 軸的值。
scaleZ(z)    定義 3D 縮放轉(zhuǎn)換，通過給定一個 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    簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。
transition-property    規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration    定義過渡效果花費(fèi)的時間。默認(rèn)是 0。transition-duration: 5s;
transition-timing-function    規(guī)定過渡效果的時間曲線。默認(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ù)中定義自己的值?？赡艿闹凳?nbsp;0 至 1 之間的數(shù)值。
transition-delay　　規(guī)定過渡效果何時開始。默認(rèn)是 0。transition-delay: 2s;

CSS3 動畫

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

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