1. 首頁 > 生活百科 > >

CSS 動畫一站式指南

生活百科

CSS 動畫一站式指南目錄

  • CSS 動畫一站式指南
    • 1. CSS 動畫
      • 1.1 變換
        • 1.1.1 變換屬性介紹
        • 1.1.2 變換動畫實踐
      • 1.2 過渡
        • 1.2.1 過渡屬性介紹
        • 1.2.2 過渡動畫實踐
      • 1.3 動畫
        • 1.3.1 Animation 屬性介紹
        • 1.3.2 Animation 動畫實踐
    • 2. CSS 動畫綜合實踐(太空艙)
      • 2.1 太空艙動畫介紹
      • 2.2 太空艙動畫實現流程
    • 3. CSS 動畫庫
      • 3.1 Animista
      • 3.2 Animate CSS
    • 4. CSS 動畫性能優化
      • 4.1 使用 visibility:hidden 替換 display:none
      • 4.2 使用 transform 代替 top
      • 4.3 避免使用 Table 布局
      • 4.4 避免規則層級過多
      • 4.5 避免節點屬性值放在循環里當成循環變量
      • 4.6 將頻繁回流重繪的節點設置為圖層
      • 4.7 開啟 GPU 硬件加速模式
    • 5. 總結
1. CSS 動畫在 CSS3 出現之前 ， 簡單的交互都需要使用 JS 才能完成，如今 CSS3 增加了transform ，transition ， animation三大交互屬性，為 CSS 的單調性增加了很多趣味，CSS 也可以實現比較復雜的動畫了 。
1.1 變換變換對應的 CSS 屬性為transform，變換可分為 2D 變換和 3D 變換，可以由transform-style來指定 。transform-style需要聲明在父節點中，即需要發生變化的節點的父節點 。
  • flat：2D 變換(所有變換效果在平面上呈現)
  • preserve-3d：3D 變換(所有變換效果在空間上呈現)
不同的變換對應不同的變換函數，在不同的變換空間使用對應的變換函數即可 ， 接下來簡單介紹一下這些變換函數 。
1.1.1 變換屬性介紹1）translate 位移
  • translate(x,y)：2D位移
  • translate3d(x,y,z)：3D位移
  • translateX(x)：X軸位移，等同于 translate(x,0) 或 translate3d(x,0,0)
  • translateY(y)：Y軸位移 ， 等同于 translate(0,y) 或 translate3d(0,y,0)
  • translateZ(z)：Z軸位移，等同于 translate3d(0,0,z)
  • 描述
    • 單位： Length 長度，可用任何長度單位，允許負值
    • 默認：XYZ軸不聲明默認是 0
    • 正值：沿X軸向右位移/沿Y軸向上位移/沿Z軸向外位移
    • 負值：沿X軸向左位移/沿Y軸向下位移/沿Z軸向內位移
2）scale 縮放
  • scale(x,y)：2D縮放
  • scale3d(x,y,z)：3D縮放
  • scaleX(x)：X軸縮放，等同于 scale(x,1) 或 scale3d(x,1,1)
  • scaleY(y)：Y軸縮放，等同于 scale(1,y) 或 scale3d(1,y,1)
  • scaleZ(z)：Z軸縮放，等同于 scale3d(1,1,z)
  • 描述
    • 單位： Number 數值或 Percentage 百分比，允許負值
    • 默認：XYZ軸不聲明默認是 1 或 100%
    • 正值： 0<(x,y,z)<1 沿X軸縮小/沿Y軸縮小/沿Z軸變厚，(x,y,z)>1 沿X軸放大/沿Y軸放大/沿Z軸變薄
    • 負值： 1<(x,y,z)<0 翻轉沿X軸縮小/沿Y軸縮小/沿Z軸變厚，(x,y,z)<-1 翻轉沿X軸放大/沿Y軸放大/沿Z軸變薄
3）skew 扭曲
  • skew(x,y)：2D扭曲
  • skewX(x)：X軸扭曲，等同于 skew(x,0)
  • skewY(y)：Y軸扭曲，等同于 skew(0,y)
  • 描述
    • 單位： Angle 角度或 Turn 周
    • 默認：XY軸不聲明默認是 0
    • 正值：沿X軸向左扭曲/沿Y軸向下扭曲
    • 負值：沿X軸向右扭曲/沿Y軸向上扭曲
4）rotate 旋轉
  • rotate()：2D旋轉
  • rotate3d(x,y,z,a)：3D旋轉，[x,y,z] 是一個向量，數值都是 0~1
  • rotateX(a)：X軸旋轉，等同于 rotate(1,0,0,a)  ， 正值時沿X軸向上逆時針旋轉，負值時沿X軸向下順時針旋轉
  • rotateY(a)：3D Y軸旋轉，等同于 rotate(0,1,0,a)  ， 正值時沿Y軸向右逆時針旋轉，負值時沿Y軸向左順時針旋轉
  • rotateZ(a)：3D Z軸旋轉，等同于 rotate(0,0,1,a)，正值時沿Z軸順時針旋轉，負值時沿Z軸逆時針旋轉
  • 描述
    • 單位： Angle 角度或 Turn 周
    • 正值：2D旋轉時順時針旋轉
    • 負值：2D旋轉時逆時針旋轉
5）視距效果 perspective
transform: perspective()可以聲明視距效果，除此之外還有一個

推薦閱讀