動畫（animation）：可以定義為使用繪畫的手法垦细，創(chuàng)造生命運(yùn)動的藝術(shù)。
兼容性：IE10+挡逼、Firefox16+括改、Chrome43+、Safari9+家坎、Opera30+嘱能、Android（-webkit-）
css3 動畫：使元素從一種樣式逐漸變化為另一種樣式的效果
animation-name
語法：animation-name: keyframename | none;
1.keyframename--指定要綁定到選擇器的關(guān)鍵幀的名稱。
2.none ： 指定沒有動畫（可用于覆蓋從級聯(lián)的動畫）
animation-duration
屬性：檢索或設(shè)置對象動畫的持續(xù)時(shí)間虱疏。
語法：animation-duration: time;
參數(shù)說明：
? ? ? ? ? ? ? ?time----->指定動畫播放完成花費(fèi)的時(shí)間惹骂。默認(rèn)值為0，意味著沒有動畫效果做瞪。
animation-timing-function?
動畫過渡屬性參數(shù)
1. linear 線性過渡
2. ease 平滑過渡
3. ease-in 由慢到快
4. ease-out 由快到慢
5. ease-in-out 由慢到快对粪，再慢右冻。
animation-delay屬性：
檢索或設(shè)置對象動畫的延遲時(shí)間。
語法
animation-delay：time著拭；
參數(shù)說明：
可選纱扭。定義動畫開始前等待的時(shí)間，以秒或毫秒計(jì)儡遮。默認(rèn)值為0.
animation-delay 屬性定義動畫什么時(shí)候開始乳蛾，單位可以是秒（s）或毫秒（ms），允許負(fù)值鄙币，-2s使動畫馬上開始肃叶，但會跳過2s進(jìn)入動畫。
【當(dāng)animation-duration為10s十嘿，animation-delay為-2s時(shí)因惭，動畫跳過兩秒的意思是動畫跳過前2s，從第3秒開始详幽，整個(gè)動畫持續(xù)時(shí)間變成了8秒】
animation-iteration-count屬性：
檢索或設(shè)置對象動畫的循環(huán)次數(shù)筛欢。
語法:animation-iteration-count：infinite | <number>浸锨；
參數(shù)說明:<number>為數(shù)字唇聘，其默認(rèn)值為“1”；infinite為無限次數(shù)循環(huán)
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)行控乾。
animation-direction 屬性定義是否循環(huán)交替反向播放動畫，如果動畫被設(shè)置為只播放一次娜遵，該屬性將不起作用
animation-fill-mode屬性
規(guī)定當(dāng)動畫不播放時(shí)（當(dāng)動畫完成或當(dāng)動畫有延遲為開始播放時(shí)）蜕衡，要應(yīng)用到元素的樣式。
語法：
animation-fill-mode：none | forwards | backwards | both | initial | inherit设拟；
參數(shù)說明：
none：默認(rèn)值慨仿。不設(shè)置對象動畫之外的狀態(tài)；
forwards：設(shè)置對象狀態(tài)為動畫結(jié)束時(shí)的狀態(tài)纳胧；
backwards：設(shè)置對象狀態(tài)為動畫開始時(shí)的狀態(tài)镰吆；
both：設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài)。
animation-play-state
屬性：指定動畫是否正在運(yùn)行或已暫停跑慕。
語法：animation-play-state: paused丨running;
參數(shù)說明：
paused----->指定暫停動畫万皿。
running----->默認(rèn)值，指定正在運(yùn)行的動畫
動畫簡寫
animation ： name duration timing-function delay iteration-count direction fill-mode play-staye ;
因?yàn)閚ame和duration是必需的，所以會先判斷這兩個(gè)牢硅。
如果只有一個(gè)時(shí)間字段绽媒，那么就會將其當(dāng)做動畫持續(xù)時(shí)間【無論其在第幾個(gè)位置】停士；如果有兩個(gè)時(shí)間字段，那么就把第一個(gè)當(dāng)做動畫持續(xù)時(shí)間，把第二個(gè)當(dāng)做動畫延遲時(shí)間圃阳。
@keyframes
keyframes定義
關(guān)鍵幀，可以指定任何順序排列來決定animation動畫變化的關(guān)鍵位置慰照。
使用說明：
使用@keyframes規(guī)則創(chuàng)建動畫富腊，通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。
在動畫過程中可以通過@keyframes規(guī)則多次更改CSS樣式的設(shè)定赃承。
語法：
@keyframes animationnme{
? ? ? ? keyframes-selector{
? ? ? ? ? ? ? ? css-styles;
? ? ? ? }
? }
參數(shù)說明：
animationname：必寫項(xiàng)妙黍，定義animation的名稱。
keyframes-selector：必寫項(xiàng)瞧剖，動畫持續(xù)時(shí)間的百分比拭嫁，0 - 100%、
from（0%）抓于、to（100%）做粤。
css-styles：必寫項(xiàng)，一個(gè)或多個(gè)合法的CSS樣式屬性捉撮。
will-change 增強(qiáng)頁面渲染性能
一般的優(yōu)化方法：
1.使用position:fixed代替background:attchement;
2.帶圖片的元素放在偽元素中
3.巧用will-change;
目前只有3D變形會觸發(fā)GPU怕品，而2D則不會。使用translateZ()(or translate3d()）Hack 為元素添加沒有變形的3D變形巾遭，騙取瀏覽器觸發(fā)硬件加速肉康。代價(jià)是通過向它自己的層疊加元素，占用RAM和GPU存儲空間
--- CSS3動畫（will-change）應(yīng)用 ----
will-change：
屬性：提前通知瀏覽器元素將要做什么動畫灼舍，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置吼和。
語法：will-chang: auto | scroll-position | contents | <custom-ident> | <animateable-feature>；
兼容性：IE13+骑素、Firefox47+炫乓，Chrome49+，Safari9.1+砂豌，Opera39+厢岂，IOS9.3，Android52
關(guān)鍵詞說明：
auto：此關(guān)鍵字表示沒有特定的意圖阳距，適用于它通常所做的任何啟發(fā)式和優(yōu)化塔粒。
scroll-position：表示將要改變元素的滾動位置。
contents：表示將要改變元素的內(nèi)容筐摘。
<custom-ident>：明確指定將要改變的屬性與給定的名稱卒茬。
<animateable-feature>：可動畫的一些特征值船老，比如left、top圃酵、margin等柳畔。
