用CSS製作簡單的動畫

標籤：時間長度   translate   linear   init   ack   順時針   near   動畫   for   

 一.2D轉換
   屬性：translate()   x,y位置移動
          rotate（）   順時針旋轉角度（單位deg，負數為逆時針）
          scale（）    x，y元素尺寸增加或減少
          skew（）     x，y方向進行拉扯（橫拉，豎拉）

1.translate
     通過translate的方法，根據給定的left（x座標）和top（y座標位置）讓元素從其當前位置移動。
    列如：
       transform：translate（50px，100px）；
    值translate（50px，100px）把元素從左側向右移動50px，從上端向下移動100px

2.rotate（）
     通過rotate（），元素順時針旋轉給定的角度，允許負值，元素將逆時針旋轉給定的角度
    列如：
        transform：rotate（30deg）
        transform：rotate（-45deg）

3.scale（）
     通過scale方法，根據給定的寬度（X軸）和高度（Y軸）參數，元素的尺寸會增加或者減少
    列如：
        transform：scale（2，0.6）
        X軸擴大到2倍，y軸擴大到0.6倍


4.skew（）方法
     通過skew（）方法，根據X軸或者Y軸進行對元素的拉扯
    列如：transform：skew（10deg，20deg）

二.3D轉換

rotateX（）圍繞X軸進行前後翻轉
rotateY（）圍繞Y軸進行前後翻轉

    列：transform：rotateX（120deg）



CSS3過度
過度是元素從一種樣式逐漸改變為另一種樣式的效果（動畫化）

屬性：transition
    列如：
div{
    width:100px;
    height:100px;
    transition: width 2s linear 5s;
}
div：hover{
    width:300px;
    }
    （滑鼠移至上方在div上，div變為寬度300，動畫共2秒鐘，動畫速度平均，5秒鐘開始動畫）

CSS3動畫（ 動畫（@keyframes） ）
步驟：
1.  規定動畫的名稱

2.  用百分比來規定變化發生的過程（關鍵詞 "from" 和 "to"，等同      於 0% （開始）和 100%（結束））

3.  捆綁到某個選取器

4.  規定動畫的時間長度

     直接設定開始和結束
    列：
     @keyframes myfirst
     {
        from {background: red;}
        to {background: yellow;}
     }


2.animation
     animation屬性： 屬性：
     animation-name: myfirst;//動畫名稱
     animation-duration: 5s;//動畫執行時間
     animation-timing-function: linear;//動畫執行效果
     animation-delay: 2s;//動畫延遲時間

    簡寫：
    animation: myfirst 5s linear 2s infinite alternate;

用CSS製作簡單的動畫