1、轉換
2、過渡
3、動畫
4、CSS優化


1、轉換
   1、什麼是轉換
      轉換即改變元素的一些狀態，大小、位置、形狀
      可以是2d轉換，也可以是3d的轉換
      2d : 使元素在 x軸和 y軸上發生變化
      3d ：2d基礎上增加了 z軸的變化
   
   2、轉換屬性
      CSS3轉換屬性:
transform : none / transform-function;
none:不轉換，預設值
transform-function：表示要實現轉換的函式
     旋轉：rotate()
     位移：translate()
     縮放：scale()
transform:rotate(旋轉度數xxxdeg); -- 旋轉操作
 
   3、轉換原點：
        轉換原點：即轉換過程中圍繞的中心點。
   預設情況下，原點是在整個元素的中間處
更改轉換原點：
 transform-origin:
 取值 ：
 數值 ：以元素左上方的點為(0,0)，再去計算其他點
 百分比:
      0% , 0% : 左上方的點
 50% ， 50% ：元素的中心點
 關鍵字:
   left
right
top
bottom
center
left top : 表示左上方
        transform-origin賦值：
  一個值 ：x軸的移動
  兩個值 ：x軸和y軸
  三個值 ：x軸，y軸，z軸
  
2、2D轉換 - 位移
   位移：位置移動
          從當前元素的位置處，移動到指定座標軸位置處
   函式：
       translate(x,y)
       translate(value);
       取值：  
       數值、百分比
   去賦值
      x ：正 向右移動
          負 向左移動
      y : 正 向下移動
          負 向上移動
       單方向位移：
          translateX(x)
          translateY(y)
 
3、2D轉換 - 縮放
   縮放：改變元素大小
   函式：scale(value)
scale(x,y)


取值：
   預設值 1
   縮小：0 - 1 之間的小數
   放大：大於1 
scaleX(x) : 橫向縮放
scaleY(y) : 縱向縮放
 
4、2D轉換 - 旋轉
   圍繞著指定點，按照指定的角度發生的旋轉
   函式：rotate(-90deg)
         取值：deg 為角度 0-360
      預設為順時針旋轉
      deg取值為負的話，則將逆時針旋轉
      
5、2D轉換 - 傾斜
   函式：skew()
         取值 ：為角度
skewX(x)
     skewY(y)
         
6、3D轉換
   屬性:
         perspective : 設定假定人眼到投影平面的距離
    隻影響3D元素，不影響2D元素
         設定位置：加在父元素上，設定好後，其子元素就可以完成3D的轉換。
         
   1、3d位移
      改變元素在z軸上的位置
      屬性：transform:
      函式：translateZ(z);
            translate3d(x,y,z);
            
   2、3d旋轉
      屬性：transform
      函式：
           rotateX(deg);
  rotateY(deg);
  rotateZ(deg)
  rotate3d(x,y,z,deg);
  x,y,z : 取值為 1，0，-1
  rotate3d(-1,0,1,45deg);
  
****************************************************


1、過渡
   1、什麼是過渡
      元素從一個【狀態】到另外一個【狀態】的【平滑變換】【過程】
   2、過渡屬性
      transition
   3、過渡4要素(子屬性)
      1、過渡屬性
         元素的哪個【狀態】發生變化時要使用過渡的效果
         當指定的屬性發生改變時，就會觸發過渡效果
語法：
transition-property:none | all | property
   transition-property:background;
      2、過渡時間
         整個過渡效果在多長時間內完成，以 秒(s)或毫秒(ms)為單位
語法：
transition-duration: s|ms;
   transition-duration:1s;
注意：
   過渡時間預設為 0 ，如果為0時，則沒有過渡的效果產生。
   如果想看到過渡效果，則必須設定該屬性。
      3、過渡函式
         指定時間內(transition-duration)過渡的速度效果。
語法：
    transition-timing-function
取值：
   ease : 預設值，慢速開始，速度變快，慢速結束
   linear:勻速開始到結束
   ease-in:慢速開始，加速效果(由慢到快)
   ease-out:慢速結束，減速效果(由快到慢)
   ease-in-out:以慢速開始和結束，先加速再減速
      4、過渡延遲
         當過渡操作被激發後，等待多長時間後才開始執行效果
語法：transition-delay
以秒或毫秒作為單位
      5、統一設定過渡效果
         屬性：
         transition:
用於設定四個過渡子屬性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition:width 2s linear 0s;




transition:prop dura timing delay;
    4、觸發過渡
       過渡效果由使用者的行為進行觸發(點選、滑鼠懸停)
  4、多個過渡效果
     transition-property:prop1,prop2;
     transition-duration:t1,t2;
     transition-timing-function:fun1,fun2;
     transition-delay:delay1,delay2;
2、動畫
   1、什麼是動畫
      將元素的多個狀態放在一起進行執行(多個狀態間的轉換)
      過渡：實現簡單的動態效果
      動畫：實現複雜的動態效果
      注意：瀏覽器相容性
         Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
      實現動畫的步驟:
        1、宣告動畫
  @keyframes
  宣告整個動畫過程中的不同狀態都是什麼 
2、呼叫動畫
  通過 animation 屬性  呼叫已宣告動畫
   2、關鍵幀
      語法：@keyframes 規則宣告動畫
      <style>
@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0%{
/*動畫的開始狀態(樣式)*/
}
/*...若干關鍵幀*/
20%{
/*動畫在執行到20%的時候的狀態(樣式)*/
}
25%{

}
26%{

}


to | 100%{
/*動畫結束時候的狀態(樣式)*/
}
}







 changeBack{

}
@-moz-keyframes changeBack{

}
@-o-keyframes changeBack{

}
      </style>
   3、動畫屬性(呼叫)
      1、animation-name : 呼叫動畫的名稱，指定 @keyframes 的名字
      2、animation-duration:動畫執行的時常以 s或ms
      3、animation-timing-function:動畫執行時的速度效果
         取值 ease,linear,ease-in,ease-out,ease-in-out
      4、animation-delay:延遲時間，以s或ms為單位
      5、animation-iteration-count
         動畫執行的次數
取值 ：
   1、具體數值 
   2、infinite : 無限次播放
   
      6、animation-direction : 動畫播放方向
         取值：
   normal
   alternate : 
      奇數次播放為正向播放(狀態從from - to)
      偶數次播放為逆向播放(狀態從to - from)
      
      7、動畫綜合屬性 : animation
         ainimation:name duration timing-function delay iteration-count direction;
         ainimation:second 2s linear 2s infinite;
         
      8、animation-fill-mode
         指定動畫在播放之前或之後的效果
none : 預設行為
forwards:動畫完成後，保持最後一個狀態
backwards : 動畫顯示之前，保持在第一個狀態
both:動畫完成後，動畫顯示前，都被相應的狀態所保持著。
      
      9、animation-play-state
         定義動畫播放狀態
配合著 Javascript使用，用於播放過程中暫停動畫
取值：
   paused ：暫停
   running ：播放