JSFiddle - React, Tailwind, and code Playground

HTML

<div id="graphic"></div>

CSS

#graphic {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
#graphic:before {
    content: '';
    
    position: absolute;
    width: 400%;
    height: 100%;
    z-index: -1;
    
    background: url(http://placekitten.com/500/500/) repeat; /* Image is 500px by 500px, but only 200px by 50px is showing. */
    animation: slide 3s infinite;
    -webkit-animation: slide 3s infinite;
}

@keyframes slide {
    20% {
        left: 0;
    }
    40%, 60% {
        left: -50%;
    }
    80%, 100% {
        left: -100%;
    }
}
@-webkit-keyframes slide {
    20% {
        left: 0;
    }
    40%, 60% {
        left: -50%;
    }
    80%, 100% {
        left: -100%;
    }
}