2019-04-02

animation动画

/*动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

infinite 不限制次数

alternate动画结束后返回,返回也算次数

animation-fill-mode 动画前后的状态

     forwards动画完成保持在最后一帧

backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

动画暂停：animation-play-state: paused

运行动画：animation-play-state: running

人物走路：

@keyframes moving{

0%{transform: translate(0px,0px);/*位移*/}

50%{transform: translate(200px,0px);}

100%{transform: translate(0px,0px);}

}

@keyframes walking{from{left: 0px;}to{left: -1920px;}}