*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

body{
    display: flex;
    min-height:100vh;
    justify-content: center;
    align-items: center;
}

.wrap{
    max-width: 1000px;
    width:1200px;
    border:solid;
}

.banner{
    width: 100%;
    max-height: 800px;
    position: relative;
}

.wrap .banner .road{
    width: 100%;
    height: 160px;
    border:solid;
    position: relative;
}

.wrap .banner .road  .dog{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: calc(600px / 3);
    height: calc(290px / 2);
    background-position: 0 0;
    background-image: url(images/dog.png);
    animation: play-x infinite steps(3), play-y infinite steps(2), move linear;
    animation-duration: 0.4s, 0.4s, 20s;
}

@keyframes play-x { 
    0% { background-position-x: 0px; } 
    100% { background-position-x: 600px; }
}

@keyframes play-y { 
    0% { background-position-y: 0px; } 
    100% { background-position-y: 290px; }
}

@keyframes move {
    0% {
        left:10px;
    }
    100% {
        left:80%;
    }
}