使元素從一種樣式逐漸變化為另一種樣式的效果枷邪。
手機(jī)設(shè)備的瀏覽器在使用CSS3動畫時别伏，要加上webkit前綴

animation-name屬性

概念：檢索或設(shè)置對象所應(yīng)用的動畫名稱
語法：animation-name: keyframename | none;
參數(shù)：keyframename(指定要綁定到選擇器的關(guān)鍵幀的名稱)瀑志，none(沒有動畫)

div > .inner { background-image: url(images/circle_inner.png);
    // 給元素設(shè)定名叫circle_inner的動畫
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
}

// 定義動畫circle_inner菌瘫，這個接下來會講到
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}

animation-duration屬性

概念：檢索或設(shè)置對象動畫的持續(xù)時間
語法：animation-duration: time
參數(shù)：time指定動畫播放完成花費(fèi)的時間熊户，默認(rèn)為0，意味著沒有動畫效果

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    // 設(shè)置動畫時間為10s
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
}

animation-timing-function屬性

概念：檢索或設(shè)置對象動畫的過渡類型
語法：animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out
參數(shù)：
linear => 線性過渡验懊，均勻運(yùn)動
ease => 平滑過渡，結(jié)束比較生硬尸变，默認(rèn)值
ease-in => 由慢到快义图，結(jié)束比較生硬
ease-out => 由快到慢
ease-in-out => 由慢到快再到慢，這種效果比較人性化

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    // 設(shè)置動畫效果為線性過渡
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

animation-delay屬性

概念：檢索或設(shè)置對象動畫的延遲時間
語法：animation-delay: time
參數(shù)：定義動畫開始前的等待時間召烂，以秒或毫秒計碱工，默認(rèn)值為0

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    // 設(shè)置2s延遲之后再開始動畫
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}

animation-iteration-count屬性

概念：檢索或設(shè)置對象動畫的循環(huán)次數(shù)
語法：animation-iteration-count: infinite | <number>;
參數(shù)：<number>為數(shù)字，默認(rèn)是1奏夫；inifinite為無限次數(shù)循環(huán)

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    // 無限循環(huán)執(zhí)行動畫
    // 注意delay是動畫之外的時間怕篷，所以無限循環(huán)動畫的時候，中間并不會停下來
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

animation-direction屬性

概念：檢索或設(shè)置對象動畫在循環(huán)中是否反向運(yùn)動
語法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
參數(shù)：
normal => 正常方向
reverse => 反方向運(yùn)動
alternate => 動畫先正常運(yùn)動再反方向運(yùn)動酗昼，并持續(xù)交替運(yùn)行
alternate-reverse => 動畫先反運(yùn)動再正方向運(yùn)動廊谓，并持續(xù)交替運(yùn)行

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    // 動畫先正常運(yùn)動再反方向運(yùn)動，并持續(xù)交替運(yùn)行
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}

animation-fill-mode屬性

概念：規(guī)定當(dāng)動畫不播放時(當(dāng)動畫完成或動畫有延遲未開始播放時)麻削，要應(yīng)用到的元素的樣式
語法：animation-fill-mode: none | forwards | backwards | both
參數(shù)：
none => 默認(rèn)值蒸痹，不設(shè)置對象動畫之外的狀態(tài)；
forwards => 設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)呛哟；
backwards => 設(shè)置對象狀態(tài)為動畫開始時的狀態(tài)叠荠；
both => 設(shè)置對象狀態(tài)為動畫結(jié)束或開始時的狀態(tài)；

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    // 設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

animation-play-state屬性

概念：指定動畫是否正在運(yùn)行或已暫停
語法：animation-play-state: paused | running
參數(shù)：paused(指定暫停動畫)扫责，running(指定正在運(yùn)行動畫榛鼎，默認(rèn)值)

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    // 強(qiáng)制暫停動畫，無論之前寫了多少動畫，都不會有效果
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

// 當(dāng)鼠標(biāo)移入的時候者娱，開始動畫
div:hover > div {
    cursor: pointer;
    -webkit-animation-play-state: running;
            animation-play-state: running;
}

animation屬性

概念：復(fù)合屬性抡笼。檢索或設(shè)置對象所應(yīng)用的動畫特效。
語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state
補(bǔ)充1：name和duration是必須的肺然，其他都是可選的
補(bǔ)充2：如果只有一個時間值蔫缸，那么會認(rèn)為這個時間值是duration時間
補(bǔ)充3：只有第一個name是固定的，后面的順序可以跟語法里的不一樣

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}

關(guān)鍵幀

概念：可以指定任何順序排列來決定Animation動畫變化的關(guān)鍵位置
說明1：使用@keyframes規(guī)則創(chuàng)建動畫际起，通過逐步改變從一個CSS樣式設(shè)定到另一個拾碌。
說明2：在動畫過程中可以通過@keyframes規(guī)則多次更改CSS樣式的設(shè)定

// 使用動畫
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}

// 定義動畫
@-webkit-keyframes circle_inner {
    form   { transform: rotateX(0deg);   }  // 寫0%也可以
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }  // 寫100%也可以
}
@keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}

will-change原理

思考：一個網(wǎng)頁有好幾張背景圖片組成，怎樣提高性能街望，滾屏的時候不會卡校翔？
方案：
1，position-fixed代替background-attachment
2灾前，帶圖片的元素放在偽元素中
3防症，巧用will-change

下面就來說說will-change

目標(biāo)：啟動GPU，以增強(qiáng)頁面渲染性能
概念：提前通知瀏覽器元素將要做什么動畫哎甲，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置
語法：will-change: auto | scroll-position | contents | <custom-ident> | <animateable-feature>
參數(shù)：
auto （沒有特定的意圖蔫敲，適用于它通常所做的任何優(yōu)化）
scroll-position （表示將要改變元素的滾動位置）
contents （表示將要改變元素的內(nèi)容）
<custom-ident> （明確指定將要改變的屬性與給定的名稱，如transform） => 推薦使用
<animateable-feature> （可動畫的一些特征值炭玫，比如left奈嘿，top，margin等 => 不推薦使用

div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; 
    margin: auto; background-repeat: no-repeat; background-position: center;
    -webkit-transition: transform 10s ease;
       -moz-transition: transform 10s ease;
        -ms-transition: transform 10s ease;
         -o-transition: transform 10s ease;
            transition: transform 10s ease;
}
div:hover {
    // 明確將要改變的屬性是transform
    // 放在父級元素的hover上吞加，這樣可以提升性能裙犹，因為沒有hover的時候，就釋放GPU了
    -webkit-will-change: transform;
       -moz-will-change: transform;
            will-change: transform;
}

注意：

勿濫用衔憨，不能在每個元素上都加上will-change
提前聲明
CSS都加載好叶圃，當(dāng)有用戶操作的時候觸發(fā)變化，這是可以的
頁面加載時践图，直接開始動畫掺冠，這種情況加will-change就沒什么用了。因為瀏覽器都要馬上開始動畫了平项，這時候啟用GPU已沒有多大意義
remove
盡量把will-chang加載hover這種跟用戶操作相關(guān)的地方赫舒。這樣用戶不操作，就不會啟用GPU闽瓢。

CSS3動畫(animation)