anima2.css

body
{
    margin: 0%;
    padding: 0px;
    background-image: url('h.png');
}
.runner
{
    background-image: url(panda.png);
    height: 149px;
    width: 177px;
     float: left;
    margin-left: 0px;
    margin-top: 380px;
    animation: hg 1s steps(9) infinite,
               hy 5s linear infinite;
}
.ru
               {
    background-image: url(hhh.png);
    height: 240px;
                   width: 256px;
                    float: left;
                   margin-left: 2px;
                   margin-top: 270px;
                   animation: hh 1s steps(6) infinite,
                              hi 5s linear infinite;
               }

@keyframes hg
{
    0%
    {
        background-position: 0px;
    }
    100%
    {
        background-position: 1600px;
    }
}
@keyframes hy
{
    0%
    {
        transform:translateX(-80px);
    }
    100%
    {
        transform:translateX(1100px);
    }
}
@keyframes hh
{
    0%
    {
        background-position: 0px;
    }
    100%
    {
        background-position: 1500px;
    }
}
@keyframes hi
{
    0%
    {
        transform:translateX(-100px);
    }
    100%
    {
        transform:translateX(1100px);
    }
}