JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="eye">
        <div class="pngseq">
        
        </div>
    </div>
</div>

CSS

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: red;
}

.eye {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48.5%;
    height: 100%;
}
 
.pngseq{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:  url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
    background-size: 5800%;
    animation: play 3s steps(57) infinite; 
}

@keyframes play {
    from { background-position:    0px 0px; }
    to { background-position: 100% 0px; }
}