我正在进行我的决赛项目,我想要发生的是在你使用skrollr.js进行滚动的时候让角色走路。到目前为止我所拥有的是一个精灵动画,它不断地走路而且我不会&#39 ;当你开始滚动它时,我知道如何让它走路:
<section id="top">
<div id="back">
<div id="move">
<div id="walk"></div>
</div>
</div>
</section>
CSS
#back{
width: 100%;
height: 100%;
background: url(../images/bgg.png) repeat-x bottom;
background-size: contain;
position: absolute;
bottom: 0;
animation: parallax_bg 20s cubic-bezier(0.37, 0.24, 1, 1) infinite;}
#move{
width: 100%;
height: 100%;
position: relative;
animation: move 50s linear infinite;}
#walk{
width: 185px;
height: 100%;
background: url(../images/spritess.png) no-repeat;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 179px);
animation: walk 1.1s steps(4) infinite;}
@keyframes walk{
100%{
background-position: -790px 0;
}
}
@keyframes move{
0%{
transform: translateX(-50%);
}
100%{
transform: translateX(100%);
}
}
@keyframes parallax_bg {
0% {
background-position: 1465px 100%;
}
100% {
background-position: 50px 100%;
}