動畫名稱闽铐、時間、曲線奶浦、延遲兄墅、播放次數(shù)、結(jié)束后是否返回澳叉、動畫前后的狀態(tài)
infinite不限制次數(shù)
alternate動畫結(jié)束后返回隙咸,返回也算次數(shù)
animation-fill-mode 動畫前后的狀態(tài)
forwards動畫完成保持在最后一幀
backwards在延遲時間內(nèi),在動畫顯示之前成洗,應(yīng)用from開始屬性值(例如box寬100五督,from寬200,在延遲1s內(nèi)顯示200)
both向前和向后填充模式都被應(yīng)用(例如起始按200瓶殃,結(jié)束停在最后一幀)
animation: moving 1s ease 1s 5 alternate both;
動畫暫
animation-play-state: paused;
}
.box:hover{
動畫運(yùn)行
/*animation-play-state: running;
}
定義一個動畫概荷,名稱為moving
@keyframes moving{
初始狀態(tài)
from{
width: 200px;
}
結(jié)束狀態(tài)
to{
width: 500px;
}
動畫多幀
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
animation: moving 1s ease 1s both;
}
@keyframes moving{
0%{
/*位移動畫*/
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;
}