CSS動畫

1.1 2D、3D（transform）

2D轉化值：

1translate();根據給定的left(x軸)和top（y軸）參數，移動元素。

例： div{
        transform:translate(50px,50px)
    }

2.rotate();使元素順時針旋轉給定的角度。正數順時針，負數逆時針，單位（deg）。
3.scale();根據寬度（x軸），高度（y軸），縮放圖片尺寸（從圖片中心放大縮小）

例：transform：scale(2,4);即寬度放大2倍，高度放大4倍

4.skew();根據給定的水平線（x軸）和垂直線（y軸）參數，元素翻轉（拉扯）給定的角度

3D轉換

屬性值：rotateX();圍繞x軸根據角度旋轉多少角度
       rotateY();圍繞y軸根據角度旋轉多少角度

1.2 CSS過渡（transition）(即動畫過程)

transition-property:width;          動畫執行效果作用體
transition-duration:1s;             動畫執行時間
transition-timing-function:linear;  動畫效果
transition-delay:2s;                動畫推遲時間

transition-timing-function包含的屬性值：

linear       勻速
ease         慢速開始——快速——慢速結束
ease-in      慢速開始
ease-out     慢速結束
ease-in-out  慢速開始和慢速結束

簡寫：

transition：width 1s linear 2s

1.3 CSS3動畫（@keyframes）

例:第一第二步
    @keyframes myFirst{
        0%{
            background:red;
        }
        50%{
            background:blue;
        }
        100%{
            background:black;
        }
    }
或：
    @keyframes myFirst{
        from{
            background:red;
        }
        to{
            background:blue;
        }
    }
第三第四步：
選擇器{animation:myFirst(動畫名) 5s}
 

animation屬性：

1.name;2.時間；3.執行效果；4.推遲時間
5.animation-iteration-count:播放次數
    ①. n:次數，默認為1
    ②. infinite:無限循環
6.animation-direction：是否逆向播放
    ①. normal:正常播放（默認）
    ②. alternate：輪流逆向播放
7.animation-play-state:規定動畫正在播放還是暫停
    ①. paused:動畫已暫停
    ②. running：動畫正在播放

簡寫：

animation:myFirst 5s linears 2s infinite alternate

css動畫