用css3實現轉換過渡和動畫效果

  發布時間:2019-10-11 11:56:34   作者:佚名   我要評論
這篇文章主要介紹了用css3實現轉換過渡和動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

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

導致JavaScript效率低的兩大原因:操作DOM和使用頁面動畫。

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

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

  • 不占用JS主線程;
  • 可以利用硬件加速;
  • 瀏覽器可對動畫做優化(元素不可見時不動畫減少對FPS影響)
  •  

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

采用js動畫還是css3動畫,需要開發者根據不同的需求做出不同的抉擇,但應該遵循一個基本的原則是:如果你需要做2D動畫,請勿必使用CSS3的transition或animation

CSS3動畫與javascript模擬動畫有以下區別:

  • CSS 3D動畫在js中無法實現
  • CSS3的3D動畫是CSS3中非常強大的功能,因為它的工作原理是在一個三維的空間里,因此js是無法模擬出像CSS3那樣的3D動畫
  • CSS 2D矩陣動畫效率高于js利用margin和left,top模擬的矩陣動畫
  • CSS3的2D動畫是指是2D矩陣Transform變化,js當然是不能做變形動畫的。就拿坐標動畫來說,使用CSS3的transform做translateXY動畫比js中的position left,position right快了近700mm!而且視覺上也比js動畫流暢很多。
  • CSS3其它常規動畫屬性的效率均低于js模擬的動畫
  • 常規動畫屬性在這里是指:height,width,opacity,border-width,color

css3的屬性

2D 轉換

CSS3 轉換可以可以對元素進行移動、縮放、轉動、拉長或拉伸。  

transform屬性,適用于2D或3D轉換的元素  

transform-origin屬性,設置轉化元素位置

1.translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動。 

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

2.rotate()方法,在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。

div {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()方法,該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / 標準語法 */
}

4.skew( [,])包含兩個參數值,分別表示X軸和Y軸傾斜的角度,如果第二個參數為空,則默認為0,參數為負表示向相反方向傾斜。

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}

3D 轉換

 translate3d(x,y,z)    定義 3D 轉化。
translateX(x)    定義 3D 轉化,僅使用用于 X 軸的值。
translateY(y)    定義 3D 轉化,僅使用用于 Y 軸的值。
translateZ(z)    定義 3D 轉化,僅使用用于 Z 軸的值。
scale3d(x,y,z)    定義 3D 縮放轉換。
scaleX(x)    定義 3D 縮放轉換,通過給定一個 X 軸的值。
scaleY(y)    定義 3D 縮放轉換,通過給定一個 Y 軸的值。
scaleZ(z)    定義 3D 縮放轉換,通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)    定義 3D 旋轉。
rotateX(angle)    定義沿 X 軸的 3D 旋轉。
rotateY(angle)    定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)    定義沿 Z 軸的 3D 旋轉。
perspective(n)    定義 3D 轉換元素的透視視圖。

CSS3 過渡

transition    簡寫屬性,用于在一個屬性中設置四個過渡屬性。
transition-property    規定應用過渡的 CSS 屬性的名稱。
transition-duration    定義過渡效果花費的時間。默認是 0。transition-duration: 5s;
transition-timing-function    規定過渡效果的時間曲線。默認是 "ease"。
    linear    規定以相同速度開始至結束的過渡效果(等于 cubic-bezier(0,0,1,1))。
    ease    規定慢速開始,然后變快,然后慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
    ease-in    規定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))。
    ease-out    規定以慢速結束的過渡效果(等于 cubic-bezier(0,0,0.58,1))。
    ease-in-out    規定以慢速開始和結束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
    cubic-bezier(n,n,n,n)  在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
transition-delay  規定過渡效果何時開始。默認是 0。transition-delay: 2s;

CSS3 動畫

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

總結

以上所述是小編給大家介紹的用css3實現轉換過渡和動畫效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • CSS3實現類似翻書效果的過渡動畫的示例代碼

    這篇文章主要介紹了CSS3實現類似翻書效果的過渡動畫的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編
    2019-09-06
  • CSS3實現的鼠標懸停圖片模糊過渡動畫特效源碼

    這是一款基于CSS3實現的鼠標懸停圖片模糊過渡動畫特效源碼。界面中展示了四件服裝商品,當鼠標滑過商品的時候,可以看到商品圖片出現模糊化,并快速過渡切換到下一張商品圖
    2019-07-10
  • 菜單欄 “三” 變形為“X”css3過渡動畫

    本文主要介紹了菜單欄 “三” 變形為“X”css3過渡動畫的實現方法。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-28
  • 詳解Css3新特性應用之過渡與動畫

    本篇文章主要介紹了Css3新特性應用之過渡與動畫,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-10

最新評論

pc蛋蛋计划下载