<div class="timing step">
    <div class="stepbox"></div>
        <span class="stepBtn">
            <a href="#" class="stepBtnStart">Start</a>
            <a href="#" class="stepBtnStop">Stop</a>
        </span>
</div>

.step {
        height: 700px;
        background: #E7F9FF;
        position: relative;
}

.step .stepbox {
        width: 800px;
        height: 600px;
        background: url(https://oranssy.github.io/coding/animation/img/walking.jpg);
        border-radius: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: ani 1s steps(30, start) infinite;
}

.step .stepbox.start {
        animation-play-state: running;
}

.step .stepbox.stop {
        animation-play-state: paused;
}

@keyframes ani {
    0% {background-position: 0 0;}

    100% {background-position: -24000px 0;}
}

.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}

.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}