JSFiddle - React, Tailwind, and code Playground

HTML

<div id="WomenSprite" class="WomenAnimation moveGirl"></div>

CSS

#WomenSprite {
    overflow:hidden;
    width:200px;
    height:200px;
    position:absolute;
    background-image:url("https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png");
    
    animation:
        moveGirl1 2s linear infinite,
        moveGirl2 2s steps(6) infinite;
    -webkit-animation:
        moveGirl1 2s linear infinite,
        moveGirl2 2s steps(6) infinite;
    -moz-animation:
        moveGirl1 2s linear infinite,
        moveGirl2 2s steps(6) infinite;
    -ms-animation:
        moveGirl1 2s linear infinite,
        moveGirl2 2s steps(6) infinite;
    -o-animation:
        moveGirl1 2s linear infinite,
        moveGirl2 2s steps(6) infinite;
}

@-webkit-keyframes moveGirl1 {
   55% { left:0px; }
   100% { left:120px; }
}

@-webkit-keyframes moveGirl2 {
   from { background-position: 0px; }
     to { background-position: -1200px; }
}

@keyframes moveGirl1 {
   55% { left:0px; }
   100% { left:120px; }
}

@keyframes moveGirl2 {
   from { background-position: 0px; }
     to { background-position: -1200px; }
}

@-moz-keyframes moveGirl1 {
   55% { left:0px; }
   100% { left:120px; }
}

@-moz-keyframes moveGirl2 {
   from { background-position: 0px; }
     to { background-position: -1200px; }
}

@-ms-keyframes moveGirl1 {
   55% { left:0px; }
   100% { left:120px; }
}

@-ms-keyframes moveGirl2 {
   from { background-position: 0px; }
     to { background-position: -1200px; }
}

@-o-keyframes moveGirl1 {
   55% { left:0px; }
   100% { left:120px; }
}

@-o-keyframes moveGirl2 {
   from { background-position: 0px; }
     to { background-position: -1200px; }
}