轉換、過渡、動畫、CSS優化

• 1 轉換
• 1.1 轉換簡介
• 1.2 2D轉換
• 1.3 3D轉換
• 2 過渡
• 2.1 過渡概述
• 2.2 過渡屬性
• 3 動畫
• 3.1 動畫概述
• 3.2 動畫屬性
• 4 CSS優化

1 轉換

1.1 轉換簡介

1. 轉換定義
   使元素改變形狀、尺寸和位置的效果，可以對元素應用2D或3D轉換進行旋轉、縮放、移動或傾斜；(改變元素在頁面中的位置、大小、角度和形狀)
   2D轉換：使元素在X軸和Y軸平面上變化，改變其形狀、尺寸和位置
   3D轉換：增加z軸的效果，網頁中不存在3D，模擬效果
2. 轉換屬性
   transform屬性向元素應用2D或3D轉換，取值：
   none：預設值，表示元素不進行轉換
   transform function：一個或者多個轉換函式，以空格分開；Eg. transform:rotate(90deg) scale(0.8);
3. 轉換原點
   transform-origin指定元素原點位置，預設原點在元素中心店或者x軸和Y軸的50%處；
   transform-origin：數值/百分比/關鍵字；
   一個值表示所有軸的位置；
   兩個值表示X軸和Y軸；
   三個值表示X軸Y軸和Z軸的位置

1.2 2D轉換

1. 2D位移
   translate()方法將元素從其當前位置移動
   translate(x)指定元素在x軸上移動位置；
   translate(x, y)指定元素在x和y的移動位置
   translateX(x)指定X軸位移
   translateY(y)指定Y軸位移
2. 2D縮放
   scale(value)方法用於等比例改變元素的尺寸，預設為1，絕對值大於1放大，小於1縮小；負數表示反轉；
   scale(x,y)分別代表x軸和Y軸的縮放比例；
   單向縮放函式scaleX()scaleY()
3. 2D旋轉
   rotate()方法用於旋轉元素，改變元素在頁面中的角度
   根據圓點順時針旋轉給定的角度，負值表示逆時針旋轉
   旋轉原點會影響旋轉效果，旋轉連同座標軸一起旋轉，會影響之後的位移效果
4. 2D傾斜
   skew()方法用於傾斜元素，以原點位置圍繞X軸和Y軸按照一定角度傾斜，可能會改變元素形狀，取值為角度。skew(x)向x軸傾斜，實際改變y軸角度；skew(x, y)
   單向傾斜函式：skewX(x)正數表示逆時針方向傾斜，skewY(y)正數表示順時針方向傾斜

1.3 3D轉換

1. perspective屬性
   屬性定義3D元素距檢視的距離，單位px；隻影響3D轉換元素，子元素獲得透視效果而不是定義的元素本身。
   瀏覽器相容性：Chrome和Safari支援-webkit-perspective
2. 3D位移
   改變元素在Z軸的位置，主要包含translateZ(z)，translate(x, y ,z)
3. 3D旋轉
   rotateX(deg)以x軸為中心軸，旋轉元素的角度
   rotateY(deg)以Y軸為中心軸，旋轉元素的角度
   rotateZ(deg)以Z軸為中心軸，旋轉元素的角度
   rotate3d(x, y, z, deg)xyz為0表示不參與旋轉
4. 3D縮放
   scaleZ(z)
   scale3d(x, y, z)

2 過渡

2.1 過渡概述

1. 過渡定義
   使CSS屬性值在一段時間內平滑過渡
   transition: background 3s linear 1s;
2. 觸發過渡
   過渡由使用者行為(點選、懸浮等)觸發；
   由元素的狀態變化觸發；
   由JavaScript程式碼觸發

2.2 過渡屬性

過渡屬性寫在元素宣告的樣式中有去有回；寫在觸發的操作(:hover等)中有去無回

1. 過渡屬性transition-property
   屬性規定應用過渡效果的CSS屬性名稱；
   transition-property:none/all/property;
   all表示所有可過渡的屬性都使用過渡效果
   可以設定過渡的屬性：
   1）顏色屬性
   2）取值為數值的屬性
   3）轉換屬性
   4）漸變屬性
   5）陰影屬性
   6）visibility屬性
2. 過渡時間transition-duration
   過渡的持續時長，以s/ms為單位的數字，預設值為0；
3. 過渡函式transition-timing-function
   過渡時間曲線函式，取值：
   linear勻速
   ease預設值，慢快慢
   ease-in慢 加速
   ease-out快 減速
   ease-in-out加速減速
4. 過渡延遲transition-delay
   規定過渡效果在元素屬性值改變後多久開始執行過渡效果(s/ms)
5. 簡寫屬性transition
   用於設定四個過渡屬性
   transition: property duration timing-function delay;最少也要包含duration屬性
6. 多過渡效果
   設定多個過渡子屬性，不同屬性值之間用逗號隔開

3 動畫

3.1 動畫概述

1. 動畫定義
   過渡屬性只能模擬動畫效果，animation屬性可以通過關鍵幀控制每一步動畫，使元素逐漸變化為另一種樣式，實現複雜的動畫效果
   瀏覽器相容性
   Chrome和Safari需要字首-webkit-；
   Firefox需要字首-moz-
   Opera需要字首-o-

2. 步驟
   1）宣告動畫：建立一個已命名的動畫，使用@keyframes宣告動畫關鍵幀

   @keyframes 動畫名稱{
   	0%{}
   	25%{}
   	...
   	100%{}
   }
   

   1. @keyframes作用
      宣告動畫，指定關鍵幀定義每個時間點上的動作
   2. @keyframes語法
      @-webkit-keyframes name
      @-moz-keyframes name
      @-o-keyframes name
      from可表示0%，to可表示100%，中間percent

   2）使用animation屬性呼叫動畫，設定動畫播放時間、播放次數等

3.2 動畫屬性

1. 動畫子屬性
   1. animation-name：呼叫動畫，規定需要繫結到選擇器的keyframe的名稱
   2. animation-duration：動畫完成一個週期需要的時間，取值為數值，單位s/ms
   3. animation-timing-function：規定動畫的速度曲線，取值為預定義函式——linear、ease、ease-in、ease-out、ease-in-out；也可以為貝塞爾曲線
   4. animation-delay：播放之前的延遲時間，取值為數值，單位s/ms
   5. animation-iteration-count：播放次數，取值數值或者infinite無限播放
   6. animation-direction：動畫播放方向，預設取值normal，reverse逆向播放，alternate輪流播放，即奇數次正常播放，偶數次向前播放
2. animation屬性
   用於控制動畫，呼叫@keyframes定義的動畫並設定屬性：
   animation: name duration timing-function delay iteration-count direction
3. animation-fill-mode屬性
   規定動畫在播放之前或之後的動畫效果是否可見，取值：
   none不改變預設行為
   forwards動畫完成後保持最後一個關鍵幀
   backwards動畫播放前在延遲時間內保持第一個關鍵幀
   both同時應用forwards和backwards
4. animation-play-state屬性
   規定動畫正在執行還是暫停，結合JavaScript程式碼實現暫停播放，可取值paused和running
5. 動畫與過渡
   過渡用於製作簡單的動畫，動畫製作複雜的動畫，且控制更精確

4 CSS優化

1. CSS優化概述
   減輕伺服器壓力，縮短伺服器響應時間，提高使用者的體驗
2. CSS優化原則
   1）儘量減少HTTP請求個數：CSS sprites合併多個背景影象到一個影象，通過background-image和background-position進行調整；Images maps結合多個影象到一個影象，總體規模大致相當，但減少HTTP請求的數量能加快頁面顯示的速度；
   2）頁面頂部引入css檔案：樣式表放在頭部，允許頁面逐步呈現，可以提高頁面載入速度；
   3）把CSS檔案和JS檔案放到外部獨立的檔案中：頁面引入外部檔案將由瀏覽器快取，後續頁會使用快取
3. CSS程式碼優化
   1）合併樣式：利用CSS繼承，提前定義統一的樣式，使用群組；
   2）縮小樣式檔案：使用簡寫屬性
   3）選擇更優的樣式屬性值
   4）減少樣式重寫：使用reset，並非全域性reset，類似針對性清除邊距
   5）程式碼壓縮：：使用yuicompressor工具壓縮CSS程式碼
   6）不在HTML中縮放影象，影象在網路傳輸中保持原來影象位元組數
   7）避免空的src和href=""