CSS3-過渡、變形、動畫

1. 過渡

在CSS3裡使用 transition 可以實現補間動畫（過渡效果）

1. 速寫語法

   transition:要過渡的屬性、花費時間、運動曲線、何時開始。
   /*如果有多組屬性變化，用逗號隔開*/
   

2. 設定過渡屬性名稱

   transition-property :要過渡屬性的名稱（如width）
   

3. 設定過渡花費時間

   transition-duration :過渡花費的時間（預設是0,時間單位為s/秒）
   

4. 設定過渡時間曲線

   transition-timing-function :規定過渡效果的時間曲線預設是ease慢快慢,linear勻速,分步steps(4)
   

5. 設定延遲時間

    transition-delay:延遲效果，規定過渡效果何時開始（預設是0，即刻開始）
   

6. 設定所有屬性都發生變化（過渡）

   transition:all 0.5s; /*簡寫，後面倆屬性可以不寫*/
   /*這種寫法不建議使用，瀏覽器要挨個遍歷屬性效率低下，建議多組屬性用逗號隔開書寫*/
   

7. 過渡是H5中新增的樣式好多老版本瀏覽器不支援，解決方法是加廠商字首

   -moz-transition : left 2s steps(5);  
   -webkit-transition: left 2s steps(5);
   -o-transition: left 2s steps(5);
   

8. 監聽過渡完成事件

   /*監聽過渡完成的事件 transitionend*/
   .addEventListener('transitionend', function() {
   
   })
   

9. 注意：過渡寫到本身上元素上，誰做過渡動畫寫到誰CSS裡，不建議寫到：hover裡，因為滑鼠移動沒有過渡動畫效果

2. 2D變形

簡述： transform 是CSS3中最具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支援矩陣方式配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果

1. 移動

   transform:translate(x,y) 
   /*移動平移,可以改變元素的位置，x、y可以為負值，也可以是%相對於元素自己寬高的百分比，
    寫一個值預設為 X。值要加上單位如：300px;*/
   /*======================================================================================*/
   /*X,Y也可以分開寫:*/
   transform:translateX(300px)
   transform:translateY(300px)
   /*注：a. 移動是相對於元素左上角座標  b. 執行完畢會回覆原始狀態*/
   

2. 縮放

   transform:scale(0.8, 1) 
   /*表示寬度縮放為 80%，高度不變，1為100%，只寫一個值預設為寬高一起縮放,
    配合過渡一起可以做圖片縮放效果*/
   /*======================================================================================*/
   /* X,Y也可以分開寫:*/
   transform:scaleX(2)
   transform:scaleY(2)
   /*注：a. 縮放是以元素中心為原點  b. 執行完畢會回覆原始狀態*/
   

3. 旋轉

   transform:rotate(45deg); 
   /*deg為旋轉的度數，正數數值為順時針旋轉，負數數值為逆時針旋轉
   注：a. 相對於Z軸旋轉   b. 執行完畢會回覆原始狀態*/
   

4. 傾斜

   transform：skew(deg,deg)  
   /*傾斜的度數，倆值分別為X水平傾斜、Y垂直傾斜，可以取負值，第二個引數不寫預設為0*/
   /*如果角度為正,則往當前軸的負方向傾斜，如果角度為負,則往當前軸的正方向傾斜;寫兩個值先傾斜水平方向，再傾斜垂直方向*/
   /*============================================================================================*/
   /*也可以單獨書寫水平、垂直方向傾斜*/
   skewX();
   skewY();
   /*注：相對於中心位置進行傾斜  b. 執行完畢會回覆原始狀態*/
   

5. 設定轉換變形的原點

   transform-origin: right bottom; /*右下角的意思；也可以用數值*/
   transform-origin: 10px 10px;/*表示原點為x、y軸的10px處。一般預設為元素的中心點為原點*/
   

6. 一般常用的是移動、縮放、旋轉

7. 注意

   移動、縮放、旋轉、傾斜同時分開寫會出現層疊。
   正確的寫法是連寫空格隔開：transform：translate(100px，100px) scale(0.3)
   移動和旋轉同時的情況下,移動寫在前面,否則會改變移動的方向
   

   配合過渡，需把 transform 給過渡當要做過渡的屬性
   

3. 3D變形

3D是基於2D的也是使用transform

1. 移動

    transform: translate3d(x,y,z) /*使元素在這三個經緯軸中移動,必須寫三個值*/
    /*也可以分開寫：*/
    transform: translateX(300px) 
    transform: translateY(300px) 
    transform: translateZ(300px) /*Z軸移動在平面上看不出效果*/
   

2. 縮放

    transform：scale3d(0.5,1,2)  /*值參考2D*/
    /*也可以分開寫:*/
    transform：scale3dX(0.5,1,2) 
    transform：scale3dY(0.5,1,2) 
    transform：scale3dZ(0.5,1,2) /*Z軸縮放在平面上看不出效果*/
   

3. 旋轉

    transform: rotate3d(x,y,z,deg); 
    /*x：代表 x 軸上的一個向量值
      y：代表 y 軸上的一個向量值
      z：代表 z 軸上的一個向量值
    deg：代表旋轉的度數
    如果只圍繞一個軸旋轉，其它兩個軸寫0即可，一個軸值寫多大都一樣，一般取1
    多個軸會根據每個軸的向量值來確定旋轉的軸線*/
   

4. 保留3D轉換的結果

   /* 使被轉換的子元素保留其3D轉換效果（需要設定在父元素中）*/
   transform-style: preserve-3d;
   /*取值：flat  不保留，預設值
        preserve-3d  保留*/
   

5. 透視、景深效果（前面不需要加transform）

    /*A. 深度：*/
       perspective: 500px; /*一般寫500px就好，透視度寫給父級盒子*/
       /*0為元素中的中心點，加大是往螢幕外的方向，減小是往螢幕裡面方向；去觀看元素盒子*/
   
    /*B. 角度：*/
       perspective-origin：0px 0px; /*規定鏡頭在平面上的位置。預設是放在元素的中心
       兩個引數為x、y,可取正負數切換角度*/ 
   

6. 定義當元素不面向螢幕時是否可見

    backface-visibility:hidden; 
   

4. 動畫

1. 語法:

   animation: 動畫名稱、花費時間、運動曲線、何時開始、播放次數、是否反方向   
   /*一般簡寫只寫前兩個屬性，後面都是預設的*/
   

2. 屬性:

   1. 規定動畫： @keyframes 
   
   2. 屬性簡寫： animation  所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
   
   3. 動畫名稱： animation-name 規定 @keyframes 動畫的名稱。
   
   4. 動畫耗時： animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
   
   5. 速度曲線： animation-timing-function 規定動畫的速度曲線。預設是ease慢快慢,linear勻速,分步steps(4)
   
   6. 動畫延遲： animation-delay 規定動畫何時開始。預設是0s。
   
   7. 動畫次數： animation-iteration-count 規定動畫被播放的次數。預設是 1。（無限次infinite）
   
   8. 交替動畫： animation-direction 規定動畫是否在下一週期逆向地播放。預設是 "normal"。（逆向alternate）
   
   9. 動畫播放狀態： animation-play-state 規定動畫是否正在播放或暫停(paused)。預設是 "running播放"。
   
   10. 動畫之外的狀態：animation-fill-mode： 規定物件動畫時間之外的狀態。
   取值：forwards 保留動畫結束時的狀態，在設定了動畫延遲和初始狀態（如：旋轉）的情況下，
               不會立刻執行動畫的初始狀態
         backwards 不會保留動畫結束時的狀態，但是如果在設定了動畫延遲和初始狀態（如：旋轉）的情況下，
               會立刻執行動畫的初始狀態
         both  既保留動畫結束狀態，在設定了動畫延遲和初始狀態（如：旋轉）的情況下，
               也會立刻執行動畫的初始狀態
   

3. 用法：

   /*在需要動畫的元素的 css 裡呼叫方法（函式） animation：動畫名稱 花費時間...
   然後在css頁面宣告函式（方法）*/
   @keyframes 動畫名稱{
        form{
            從哪開始，如：
             left:0;  
        }
        to{
            到哪結束,如：
            left:1000px;
        }
    }
   /*=================================================================*/
    /*另一種百分比寫法:*/
   @keyframes 動畫名稱{
        0%{
            從哪開始，如：
             left:0;  
        }
        50%{
            到哪結束,如：
            left:1000px;
        }
        100%{
   
        }
    }
    /*注：0%可以寫成form   100%可以寫成to
   注：可以用百分比方式來設定動畫各個時段的狀態，每個時段都是一個關鍵幀，中間的動畫過程叫補間	動畫。
   注：過渡只有兩個關鍵幀*/