JSFiddle - React, Tailwind, and code Playground

HTML

<div id='kittysprite' class='stillkitty'></div>

CSS

body{
    height:20000px;
}
.stillkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: stillkitty 4s steps(15) infinite;
    background-color: red; 
    height: 75px;
    width: 150px;
    }

@keyframes stillkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1125px; }
    }


.walkingkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: walkingkitty 1s steps(5) infinite;
    background-color: blue; 
    height: 75px;
    width: 150px;
    }

@keyframes walkingkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -375px; }
    }

.backkitty {
    position: fixed;
    bottom: 5%;
    left: 30%;
    animation: backkitty 1s steps(4) infinite;
    background-color: yellow; 
    height: 75px;
    width: 150px;
    }

@keyframes backkitty {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -300px; }
    }

JavaScript

var lastScroll = 0;
var isScrolling = false;

$(document).ready(function($) {
    $('#kittysprite').addClass('stillkitty');
    
    //run every 3000ms and see if user is not scrolling then reset
    setInterval(function() {
        if(!isScrolling){
            $('#kittysprite').removeClass().addClass('stillkitty');
        }
    }, 3000);
    
    $(window).scroll(function(){
        //User is scrolling
        isScrolling = true;
        
        //Reset the timeout
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // User is not scrolling
            isScrolling = false;
        }, 250));
        
        var scroll = $(window).scrollTop();
        if (scroll > lastScroll) {
            $('#kittysprite').removeClass().addClass('walkingkitty');
        } 
        else if (scroll < lastScroll) {
            $('#kittysprite').removeClass('walkingkitty').addClass('backkitty');
        }
        
        lastScroll = scroll;
    });
});