關(guān)鍵字：keyframes
@keyframes 名字 {
每幀動(dòng)畫(huà)的節(jié)點(diǎn)------0%[from] {
設(shè)定樣式
}
50% {
設(shè)定樣式
}
100%[to] {
設(shè)定樣式
}
}
兼容處理：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
動(dòng)畫(huà)名字：
animation-name: 動(dòng)畫(huà)名字-----定義一個(gè)動(dòng)畫(huà)名字，寫(xiě)在選擇器里，讓我們能找到這個(gè)動(dòng)畫(huà)
動(dòng)畫(huà)持續(xù)時(shí)間：完成整個(gè)動(dòng)畫(huà)一遍要多長(zhǎng)時(shí)間
animation-duration: 1s；
動(dòng)畫(huà)延遲執(zhí)行時(shí)間：重新打開(kāi)頁(yè)面后，動(dòng)畫(huà)會(huì)延遲開(kāi)始執(zhí)行
animation-delay：1s;
動(dòng)畫(huà)執(zhí)行次數(shù)：
animation-iteration-count：infinite（無(wú)限次）/2（次數(shù)）
動(dòng)畫(huà)運(yùn)動(dòng)方向：
animation-direction:normal/reverse/alternate/alternate-reverse
假設(shè)A表示開(kāi)始的狀態(tài)，B表示結(jié)束狀態(tài)
normal: ABABABAB
reverse: BABABABA
alternate: ABBAABBA
alternate-reverse: BAABBAAB
建立3D效果：
transform-style:preserve-3d--------設(shè)置在父項(xiàng)中，讓子項(xiàng)在父項(xiàng)里有3D環(huán)境
子元素，也就是里面的面，每個(gè)面就根據(jù)對(duì)應(yīng)的要求平移或者旋轉(zhuǎn)或者縮放，一般先旋轉(zhuǎn)擺好角度再平移，之后平移的值相同。這樣整個(gè)3D模型就建好好了。
之后旋轉(zhuǎn)整個(gè)坐標(biāo)系讓圖產(chǎn)生3D變化的效果
