infinite不限制次數(shù)
alternate動(dòng)畫結(jié)束后返回排霉，返回也算次數(shù)
animation-fill-mode 動(dòng)畫前后的狀態(tài)
forwards動(dòng)畫完成保持在最后一幀
backwards在延遲時(shí)間內(nèi)浅乔，在動(dòng)畫顯示之前脚作，應(yīng)用from開始屬性值（例如box寬100，from寬200贞铣，在延遲1s內(nèi)顯示200）
both向前和向后填充模式都被應(yīng)用（例如起始按200，結(jié)束停在最后一幀）
animation-play-state: paused;（動(dòng)畫暫停）
animation-play-state: running;（動(dòng)畫運(yùn)行）
定義一個(gè)動(dòng)畫，名稱為moving：
????@keyframes moving{
????????????from{
????????????????????width: 200px;
????????????}
????????????to{
????????????????????width: 500px;
????????????}
????????????}
人物走路動(dòng)畫
.box img{
position: absolute;
left: 0;
top: 0;
/*steps動(dòng)畫步數(shù)匪蟀，圖片有8幀，所以設(shè)置為8步*/
animation: walking 2s steps(8) infinite;
}
@keyframes walking{
????????from{
????????????????left: 0px;
????????}
????????to{
????????????????left: -1920px;
????????}
????????}
@keyframes moving{
????????0%{
????????????????transform: translate(0px,0px);/*位移*/
????????}
????????50%{
????????????????transform: translate(200px,0px);
????????}
????????100%{
????????????????transform: translate(0px,0px);
????????}
????????}
多幀動(dòng)畫
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
animation: moving 1s ease 1s both;
}
@keyframes moving{
0%{
/*位移動(dòng)畫*/
transform: translateY(0px);
background-color: cyan;
}
50%{
transform: translateY(400px);
background-color: gold;
border-radius: 0px;
}
100%{
transform: translateY(0px);
background-color: red;
border-radius: 50px;
}
}
圖片翻面
.info{
background-color: gold;
text-align: center;
line-height: 272px;
/*transform: translateZ(10px);初始文字浮起10像素方便查看圖片與文字分層的效果*/
/*初始文字翻轉(zhuǎn)宰僧，鼠標(biāo)移入時(shí)才翻正顯示*/
transform: translateZ(2px) rotateY(180deg);
}
/*鼠標(biāo)移入時(shí)圖片翻為背面隱藏*/
.con:hover .pic{
transform: perspective(800px) rotateY(180deg);
}
/*鼠標(biāo)移入時(shí)文字翻為正面顯示*/
.con:hover .info{
transform: perspective(800px) rotateY(0deg);
}
