1 .核心原理:是一張連續(xù)幀的圖片不斷變化位置茫蛹，連續(xù)的位置變化肉眼展示的就是一個(gè)動(dòng)畫了逻锐。這個(gè)對(duì)圖片的位置要求非常嚴(yán)格岸夯。ps切圖的時(shí)候就要仔細(xì)確定位置授艰。
2 .新知識(shí):animation中的steps參數(shù)
steps-animation-time-function 的參數(shù)
1 .讓動(dòng)畫不連續(xù)败砂，每一次動(dòng)畫執(zhí)行到一個(gè)幀
2 .steps（）功能符和cubic-bezier功能符的地位和作用是一樣赌渣，但是表現(xiàn)效果是不一樣的，steps類似于樓梯坡道昌犹，每一次執(zhí)行到一個(gè)地方坚芜，cublic-bezier更像是無(wú)障礙坡道
steps(num,position)
number:數(shù)值，表示把動(dòng)畫分成了多少段斜姥，每一次跳到這一個(gè)地方
position:start/end
start:動(dòng)畫執(zhí)行的5個(gè)分段點(diǎn)是最后5個(gè)點(diǎn)鸿竖，也就是會(huì)漏掉最一開始那個(gè)，一步到位
end:從最一開始執(zhí)行铸敏，最后一個(gè)漏掉了缚忧，延遲到位
3 .對(duì)于只有0%，100%或from杈笔，to兩個(gè)關(guān)鍵幀的動(dòng)畫闪水，沒有適用的理由
4 .如果是非等分，無(wú)法過渡的階梯動(dòng)畫蒙具，則有適用價(jià)值
fixed元素居中顯示
1 .方案1
.f;
margin:auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 200px;
height: 180px;
2 .方案2
left: 50%;
top:50%;
transform: translate(-50%,-50%);
3 .方案3
.f;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -90px;
width: 200px;
height: 180px;
4
